我創建一個表單時，我發現自己創建了好多個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>

這樣就可以根據我們的需要，在按下回車鍵的時候讓頁面執行我們希望的操作。

全體代碼：