javascript - 使用 React 处理大表单

Question

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

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

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

网上的所有示例似乎都希望我创建一个状态，然后对于每个输入元素，我将状态绑定(bind)到它，然后我的所有值都将在 this.state 中。

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

我找到了一种使用引用的方法，但我不想使用它，因为我知道引用字符串已被弃用。引用解决方案如下:

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>

获取多个输入的值而不需要绑定(bind)每个输入的推荐方法是什么？

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>