大型 react-redux 表单应用程序答案

【问题标题】：Large react-redux form app大型 react-redux 表单应用程序
【发布时间】：2016-07-07 07:42:48
【问题描述】：

我一直在使用 react 重写我公司的一个模块，该模块是一个可组合 4-5 种不同表单的单页，然后在每个表单中进行的选择决定了下一个表单步骤的外观。

有很多“静态”输入字段不会影响应用的可视化ui状态，但需要发送到服务器，其他输入正在改变ui状态。

我正在为此类应用寻找正确的方法，因为它似乎将 onChange 事件附加到每个输入（整个页面中总共有 100 多个输入）。 我使用了 react-redux-forms 插件，但它对我来说太过分了，因为我需要直接访问状态并根据它做出决定。我宁愿对国家有更多的控制权。

为每个输入绑定 onChange 事件是正确的解决方案吗？或者有没有更好的方法。

【问题讨论】：

可能值得考虑将表单分成更小的块并采用一种类似向导的方法。也可以看看 redux-form 库，其中最新版本对您描述的确切问题进行了许多改进。
我已将整个表单分成小组件块，我的问题更多是关于如何通知每个可用输入字段的更改状态。我会再次研究 react-redux-forms

标签： javascript reactjs

【解决方案1】：

我们用redux-form 很容易做到这一点。因为所有内容都在 fields 属性中维护，所以您可以执行以下操作：

const Form = ({
  fields,
  handleSubmit,
  saveForm
}) => (
  <form onSubmit={handleSubmit(saveForm)}>
    <fieldset>
      <input type="text" {...fields.hasAlternativeDelivery} />
    </fieldset>
    {fields.hasAlternativeDelivery.value === true &&
      <fieldset>
        {/* more fields go here */}
      </fieldset>
    }
  </form>
);

然后我们有条件地验证某些字段集like this。因此，要回答您的问题：您不应该依赖更改事件来隐藏/显示某些字段，这违背了 React 的本质（React 是声明性的，您所描述的是一种命令式的做事方式）。相反，弄清楚什么状态（/props）应该导致哪个 UI。

【讨论】：