Question

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

我不需要将任何数据绑定到表单，因为它总是会加载空白，而提交时只需将数据发送到API并重定向到＆＃34;请查看我们的电子邮件＆＃34;页。

我也遇到的问题是，我正在使用MaterialiseReact并使用他们的自定义组件。这只是一个带有名称的输入，因此传统的formdata将完整无缺。

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

这似乎有点长的路要走，因为我有30,40个场。

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

myColumn

在没有绑定每个输入的麻烦的情况下，获取许多输入值的建议方法是什么？

Answer 1

反应团队处理表单的两种推荐方法是受控和不受控制的组件。创建和维护状态不仅仅是使用不受控制的组件，例如您在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

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

效果问题

您的组件的设计必须确保一个输入的更改不会影响另一个输入，直到需要它为止。

的可伸缩性

应该很容易添加＆amp;删除表单控件。

州管理

使用触摸，错误等所有控件信息维护集中状态并不容易。

动态更改

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

验证＆amp;错误

嵌套表单

所以，省力省力更好。时间使用一些表格库。

结帐此库react-reactive-form

一些很酷的功能是：

独立于用户界面。

零依赖。

嵌套表格。

价值和用户的订阅者控制的状态变化。

提供一组验证器＆amp;还支持自定义同步和异步验证器。

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

使用FormGroup＆amp ;;更好的表单管理FormArray apis。

可自定义的更新策略，可以更好地使用大型表单。

使用React处理大型表单

2 个答案: