大型表单应用程序

Question

我一直在使用react重写公司中的一个模块，该模块是由4-5个不同的表单组成的单个页面，每个表单中的选择都会决定下一个表单步骤的一致性。

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

我正在为这种类型的应用程序寻找正确的方法，因为它似乎将onChange事件附加到每个输入(整个页面中有超过100个输入)。我使用了react redux-forms插件，但是它对我来说太像块盒了，因为我需要直接访问状态并根据它做出决定。我更喜欢对国家进行更多的控制。

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

Answer 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>
);

然后我们有条件地验证某些字段集像这样。因此，要回答您的问题:您不应该依赖更改事件来隐藏/显示某些字段，这与React的本质是背道而驰的(React是声明性的，您所描述的是一种势在必行的做事方式)。相反，找出哪种状态(/props)应该导致哪种UI。