我创建一个表单时，我发现自己创建了好多个useStates，并且为这些 useStates 创建了多个onChange 处理程序。 像这样的：

太烦了啊。所以......你懂的，在这篇文章中，我将尝试以一种优雅的方式解决这个问题。

让我们先看简化后的代码：

兄弟们，总共的代码就这么几行，删掉了所有的useState，删掉了所有的onChange，点击sumit按钮，你还是可以拿到你所有想要的值：

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

• 将输入字段包装在实际的 HTML Form表单元素中
• 定义每个输入字段的名称属性（可以是任何东西，HTML 使用此属性来命名输入值）
• 创建一个没有 onClick 处理程序但类型属性设置为“submit”的提交按钮
• 在表单元素下定义一个 handleSubmit 处理程序

用户在输入中输入详细信息后，单击表单中的提交的按钮，将导致 HTML 表单触发onSubmit事件，即我们的 handleSubmit 函数。

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

调用 HTML FormEvent 类型的 preventDefault 方法，由 HTML 自己作为参数传递给我们的函数（我们将其命名为 e）。 此功能可防止表单在提交后继续其默认行为(比如页面会刷新)。

在 FormData 构造函数中传递表单元素（引用为 e.target）并将其存储在我们的 formData 中，最后使用 Object.fromEntries( ... ) 将具有输入值的 FormData 对象转换为纯 JavaScript 对象。

这是最简单的实现，但有个问题就是，你不可以使用这种方法写受控输入控件。如果需要受控组件，只能使用useState。关于受控组件和非受控组件的区别，我会专门写一篇文章来解释。

其实在真实项目中，我们一般是将两种方法结合起来，如果需要实时校验的字段，只能使用受控组件，其他使用非受控组件。这样既减少了代码量，又实现了你想要的效果。

orm 对象

Form 对象代表一个 HTML 表单。

在 HTML 文档中 <form> 每出现一次，Form 对象就会被创建。

Form 对象集合

elements[] 包含表单中所有元素的数组。

elements 集合可返回包含表单中所有元素的数组。

元素在数组中出现的顺序和它们在表单的HTML 源代码中出现的顺序相同。

每个元素都有一个 type 属性，其字符串值说明了元素的类型。

formObject.elements[].property

<form id="myForm">
Firstname: <input id="fname" type="text" value="Mickey" />
Lastname: <input id="lname" type="text" value="Mouse" />
<input id="sub" type="button" value="Submit" />
</form>
<p>Get the value of all the elements in the form:<br />
<script type="text/javascript">
var x=document.getElementById("myForm");
for (var i=0;i<x.length;i++)
{
    document.write(x.elements[i].value);
    document.write("<br />");
    document.write(x.elements[i].type);
    document.write("<br />");
}
</script>

Form 对象属性

acceptCharset 服务器可接受的字符集。

action 设置或返回表单的 action 属性。

enctype 设置或返回表单用来编码内容的 MIME 类型。

id 设置或返回表单的 id。

length 返回表单中的元素数目。

method 设置或返回将数据发送到服务器的 HTTP 方法。

name 设置或返回表单的名称。

target 设置或返回表单提交结果的 Frame 或 Window 名。

标准属性

className 设置或返回元素的 class 属性。

dir 设置或返回文本的方向。

lang 设置或返回元素的语言代码。

title 设置或返回元素的 title 属性。

Form 对象方法

reset() 把表单的所有输入元素重置为它们的默认值。

submit() 提交表单。

Form 对象事件句柄

onreset 在重置表单元素之前调用。

onsubmit 在提交表单之前调用。

些时候我们不希望，回车就向服务器提交当前表单，以下方法亲测有效，仅供参考

当form中含有文本框如下：

<form action="../test.php">
     <input type="text" id="txt1"/>
</form>

在文本框输入回车后会导致页面提交，如下:

这未必是我们想要的效果。

为了防范这种情况发生，可以这么做：

<form action="../test.php">
    <input type="text" id="txt2" onkeydown="if(event.keyCode==13){event.keyCode=0;test();return false;};"/>             
</form>

这样就可以根据我们的需要，在按下回车键的时候让页面执行我们希望的操作。

全体代码：