大型反应冗余表单应用程序

Large react-redux form app

本文关键字：表单 应用程序 冗余 大型      更新时间：2023-09-26

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

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

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

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

我们很容易用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。

相关文章：