Question

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

Answer 1

它们是多种形式的反应方式，许多都不涉及state。

许多人使用redux来存储其应用程序状态。

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

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

这就是为什么存在redux的原因，并且您应该阅读它的含义，这将帮助您获得答案。

Answer 2

您在这里也可以使用以前的方法，但是问题在于，由于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获取然后迭代每个元素所需的时间，而不是在表单提交期间管理每个按键的状态。

Answer 3

根据项目的规模，有许多易于处理表单提交的软件包，例如：formik，redux-form，react-final-form，仅举几例。但是，大多数使用相同的技术。例如formik不仅可以解决此问题，还可以为您处理一些边缘情况，因此您不必担心。

简而言之，我想说的是，这是处理表单数据的最好方法，至少是反应方法。

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

3 个答案: