在 ReactJS 中使用表单的最佳实践是什么？答案

【问题标题】：What is the best practices to work with forms in ReactJS?在 ReactJS 中使用表单的最佳实践是什么？
【发布时间】：2019-01-16 09:57:59
【问题描述】：

在 VanilaJs 中，我们在 onSubmit 期间使用 FormData 发出请求从表单中获取数据。在 ReactJ documentation 中我们看到，在提交之前建议设置引入用户的数据。在点击提交按钮后，我们从状态中获取这些数据并发出请求。那么使用 React 处理表单是最好的方法吗？

【问题讨论】：

简而言之，是的。通常将数据 onChange 收集到组件状态，然后 onSubmit preventDefault() + 将数据作为 POST 发送到您的 api。
reactjs.org/docs/forms.html#fully-fledged-solutions

标签： javascript reactjs forms

【解决方案1】：

您也可以在此处执行与旧方法相同的操作，但问题是您延迟了表单提交，因为 HTML 集合需要更多时间来迭代而不是查找和管理状态。看例子：

import React from 'react';

class Login extends React.Component {
  login(event) {
    event.preventDefault();

    const data = {};
    const inputs = event.getElementsByTagName('input');

    for (let input of inputs) data[input.id] = input.value;

    // send `data` to server to test for login

    console.log(data);
  }

  render() {
    return (
      <form onSubmit={this.login}>
        <input id="email" type="email" />
        <input id="password" type="password" />
        <button type="submit">Login</button>
      </form>
    );
  }
}

想象一下从 DOM 获取然后迭代每个元素所花费的时间，而不是在表单提交期间管理每个按键的状态。

【讨论】：

【解决方案2】：

根据您项目的大小，有很多包可以轻松处理表单提交，例如：formik、redux-form、react-final-form，仅举几例。但其中大多数使用相同的技术。例如formik 就是这样做的，并且还为您处理一些边缘情况，这样您就不必担心。

简而言之，我会说是的，这是处理表单数据的最佳方式，或者至少是反应方式。

【讨论】：

【解决方案3】：

它们是 react 中的多种形式，很多不涉及state。

许多人使用redux 来存储他们的应用程序状态。

当然，您可以使用您的组件state，但您也可以使用redux-form（流行）或formik（轻量级）。

存储到 state 就像存储到 object 一样简单，但是将所有内容存储在 React DOM 中的一个位置会变得很复杂..

这就是 redux 存在的原因以及为什么你应该阅读它是什么，它将帮助你得到答案。

【讨论】：