我創建一個表單時,我發現自己創建了好多個useStates,并且為這些 useStates 創建了多個onChange 處理程序。 像這樣的:
太煩了啊。所以......你懂的,在這篇文章中,我將嘗試以一種優雅的方式解決這個問題。
讓我們先看簡化后的代碼:
兄弟們,總共的代碼就這么幾行,刪掉了所有的useState,刪掉了所有的onChange,點擊sumit按鈕,你還是可以拿到你所有想要的值:
對于剛接觸 React 的初學者朋友,我們在這里所做的是:
用戶在輸入中輸入詳細信息后,單擊表單中的提交的按鈕,將導致 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>
這樣就可以根據我們的需要,在按下回車鍵的時候讓頁面執行我們希望的操作。
全體代碼:
*請認真填寫需求信息,我們會在24小時內與您取得聯系。