我在 React.js 中一直以错误的方式创建表单 🤔

介绍

我在创建注册表单时，发现自己创建了几十个 useState，然后又为这些 useState 创建了几十个 onChange 处理程序。就像这样 🤮

伙计，即使为了说明而写这篇文章，我还是觉得很困！

另外，不用客气，用那段令人眼花缭乱的One Light主题代码片段来炫耀你的眼球。适量的白色确实能吸引眼球，没错！😉

所以...你明白了，在这篇文章中，我将尝试以一种优雅的方式解决这个问题（当然不是我在上一篇文章中做的 BS ，制作一个有缺陷的 React Form 组件，甚至没有人愿意看一眼！）

让我们开始吧！

代码

export default function App() {

  // NOT a even a SINGLE useState babyyyyyyy! 😎

  const submitForm = (e) => {
    e.preventDefault();

    const formData = new FormData(e.target);
    const inputObject = Object.fromEntries(formData); // convert the FormData object to a JSON object

    console.log(inputObject);
  };

  return (
    <div className="App">
      <form onSubmit={submitForm}>
        <div>
          <input name="email" placeholder="email" />
        </div>

        <div>
          <input name="password" placeholder="password" />
        </div>

        <div>
          <input name="phone" placeholder="phone" />
        </div>

        <br />

        <button type="submit">Submit</button>
      </form>
    </div>
  );
}

您可以在查看此帖子的同一浏览器中尝试此代码并进行修改，这要感谢codesandbox（代码链接）

对于刚接触 React 的初学者朋友，我们在这里所做的是：

• 将输入字段包装在实际的 HTMLform元素中
• 定义name每个输入字段的属性（可以是任何内容，HTML 使用此属性来命名输入值）
• 创建一个没有onClick处理程序但type属性设置为的按钮'submit'
• 在元素onSubmit下定义一个处理程序form

用户在输入中完成其详细信息后，单击type='submit'表单中声明的​​按钮将导致 HTMLform元素调用其onSubmit处理程序，即我们的submitForm函数。

const submitForm = (e) => {
  // 1
  e.preventDefault();

  // 2
  const formData = new FormData(e.target);

  // 3
  const inputObject = Object.fromEntries(formData); // convert the FormData object to a JSON object
  console.log(inputObject);
};

现在，我们在这里做了三件事：

1. 调用preventDefaultHTMLFormEvent类型的方法，该方法由 HTML 女神亲自作为参数传入我们的函数（我们将其命名为e）。此函数会阻止表单在提交后继续其默认行为，包括自动向同一页面的 URL 发起 GET 请求，并将表单输入值作为有效负载，并重新加载页面（我们不希望出现这种情况，因为我们正在定义自己的表单提交逻辑，其功能将被页面重新加载中断）。

2. 将表单元素（引用为e.target）传入FormData构造函数并将其存储在formData常量中。
   这将获取输入元素并将其解析为键值对，其中键是我们在name输入属性中定义的键，值是它们对应的输入文本。所有不同的输入文本值都可以通过其名称检索，如下所示：
   

// quite similar to the map syntax to get a key ( map.get("key") )
const email = formData.get("email")

这难道不是很神奇又优雅吗？HTML 帮你完成了所有工作，从解析表单输入值到收集数据，最后以类似 map 的结构返回🪄。=

3.最后，同样重要的是，我们将FormData包含输入值的对象转换为普通的 JavaScript 对象Object.fromEntries( ... )。记录刚刚创建的对象，输出如下：

有用！

但是！这可是个大问题（双关语），这种方法的缺点是你无法编写受控输入。为此，你必须声明一个useState& 来对应它onChange。

“受控输入到底是什么？”

看看这个例子

这是 React js 中的受控输入，但对于这样的输入，我们可以使用混合方法：

• 定义表单中的所有输入
• 仅对受控的输入进行写入useState和处理onChange
• 然后，手动将 formData 中的值设置为这些受控状态变量

动图

PS：
看到 HTML 自动为我们处理输入似乎是一种魔法，说实话，我讨厌魔法的发生，但为了让开发者体验更好，一定程度的魔法是可以忍受的👌🏻

啊啊……就到这里啦！
喜欢的话就点个赞吧🙃

但如果你喜欢呢？哥们，一定要在推特上关注我😉

暂时再见！