Javascript 用React处理大型表单

我在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>

submitform（）{
const formData={}；
for（此中的常量字段。参考）{
formData[field]=此.refs[field].值；
}
//现在，我将所有值包装在一个对象中，以发送到服务器
}
//物化代理组件。呈现为

---

建议使用什么方法来获取多个输入的值而不必绑定每个输入？

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>

submitform（）{
const formData=this.state
//现在，我将所有值包装在一个对象中，以发送到服务器
}
变化=（e）=>{
常量{value，name}=e.target
this.setState（{[name]：value}）
}
//物化代理组件。呈现为

使用大型表单时，您可能会面临一些挑战：

• 性能问题

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

• 可伸缩性

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

• 状态管理

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

• 动态变化

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

• 验证和错误
• 嵌套表单

所以，最好使用一些表单库来节省精力和时间

签出此库

一些很酷的功能包括：

• 与用户界面无关

• 零依赖性

• 嵌套表单

• 控件值和状态更改的订阅服务器

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

• FormGenerator api，用于创建代码较少的大型表单

• 使用FormGroup和FormArray API进行更好的表单管理

• 可定制的更新策略，可在大型表单中实现更好的性能

---

我们已经了解了5000个表单字段的演示，没有任何性能延迟：它使用状态钩子绑定表单字段，但这是React的方式。免责声明：我是该项目的作者。我们可以在功能组件中也这样做吗？我的意思是，使用太多的

useState

来存储每个输入的值，然后在提交时将它们打包到单个对象中可以吗？@BrightFaith如果我理解正确，让每个输入存储自己的值，然后在提交时收集所有的值可以工作。它所做的只是使submit方法变得更慢，因为它现在需要迭代N个输入来收集/打包它们的数据。一个状态对象与多个状态对象的内存限制是相同的，这是浏览器中的内存限制。最终，这是可以的，但对于这个特定的例子来说，这似乎是一个不必要的复杂性。在大多数简单的应用程序中，这个决定根本不会对速度产生太大影响。