使用 React 处理大型表单

Question

我在 React-redux 页面中有一个很大的注册表单。

我不需要将任何数据绑定到表单，因为它总是加载空白，并且在提交时可以将数据发送到 API 并被重定向到“请检查我们的电子邮件”页面。

我也遇到的问题是我正在使用 MaterializeReact 并使用他们的自定义组件。这只是呈现为带有名称的输入，因此传统的表单数据将是完整的..

网上所有的例子，好像要我创建一个状态，然后对每个输入元素我绑定状态到它，然后我所有的值都会在this.state中。

这似乎有点远，因为我有 30、40 个字段。

我找到了一种使用 refs 的方法，但我不想使用它，因为我知道 ref 字符串已被弃用。 ref 解决方案是这样的：

submitform() {
    const formData = {};
    for (const field in this.refs) {
      formData[field] = this.refs[field].value;
    }
    //Now I have the all values wrapped in a object to send to server
  }

<form>
  <Input ref="firstName" />  //MaterializeReact Component. Renders as <input>
 <button type="button" onclick="{submitForm}" />
</form>

在不麻烦绑定每个输入的情况下获取多个输入的值的推荐方法是什么？

Answer 1

React 团队推荐的两种处理表单的方法是受控组件和不受控组件。创建和维护状态并不比使用不受控制的组件更复杂，例如您在refs 中的初始建议，您在提交数据之前构建了自己的名为formData 的状态。

这是使用状态的等效解决方案，它不会被弃用。

submitform() {
    const formData = this.state
    //Now I have the all values wrapped in a object to send to server
}

handleOnChange = (e) => {
    const { value, name } = e.target
    this.setState({ [name] : value })
}

<form>
    <Input name="firstName" onChange={this.handleOnChange} /> //MaterializeReact Component. Renders as <input>
    <button type="button" onclick="{submitForm}" />
</form>

Answer 2

在处理大型表单时，您可能会面临一些挑战：

• 性能问题

您的组件的设计方式必须确保一个输入的更改在需要之前不会影响另一个输入。

• 可扩展性

应该很容易添加和删除表单控件。

• 状态管理

用所有的控制信息（如触摸、错误等）保持一个集中状态并不容易。

• 动态变化

例如：根据其他字段的值禁用某个字段。

• 验证和错误
• 嵌套表单

因此，最好使用一些表单库来节省精力和时间。

查看这个库react-reactive-form

一些很酷的功能是：

• 独立于用户界面。

• 零依赖。

• 嵌套表单。

• 控件值和状态更改的订阅者。

• 提供一组验证器，还支持自定义同步和异步验证器。

• FormGenerator api 用更少的代码创建大型表单。

• 使用 FormGroup 和 FormArray api 更好地管理表单。

• 可自定义的更新策略，以提高大型表单的性能。