Question

我一直在使用react重写我公司的一个模块，该模块是一个由4-5种不同形式组成的单页，每种形式的选择然后确定下一个表单的外观步。

有很多＆＃34;静态＆＃34;输入字段不影响应用程序的可视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>
);

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

大型react-redux表单应用程序

1 个答案: