使用React处理大型表格

Question

我在React-redux页面上有一个大的注册表格。

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

我还遇到的问题是，我正在使用MaterializeReact并使用其自定义组件。这只是将其渲染为带有名称的输入，因此传统的formdata将保持不变。

在线上的所有示例似乎都希望我创建一个状态，然后为每个输入元素将状态绑定到该状态，然后所有值都将位于this.state中。

好像还有很长一段路要走，因为我有30、40个领域。

我找到了一种使用ref的方法，但由于我知道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在提交数据之前在其中建立自己的状态。

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

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 实现更好的表单管理。

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