时间戳

首页 > 解决方案 > 在 ReactJS 中使用表单的最佳实践是什么？

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

问题描述

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

标签： javascriptreactjsforms

解决方案

您也可以在此处执行与旧方法相同的操作，但问题是您正在延迟表单提交，因为 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 获取然后迭代每个元素所花费的时间，而不是在表单提交期间管理每个按键的状态。

推荐阅读