在沒有庫的情況下使用React中的表單
最初發佈於https://sergiodxa.com/articles/react-working-with-forms/
在JavaScript中處理表單可能是一項艱巨的任務，在本文中我們將學習如何馴服它們。
不受控制的輸入
首先，我們需要討論不受控制的輸入，我說輸入它也是select或textarea。這是輸入的默認狀態，在這種情況下，我們不做任何特殊操作，讓瀏覽器處理它的值。
功能 形成（） { 常量 （信息， setMessage） = 應對。useState（「」）; 功能 handleSubmit（事件） { 事件。的preventDefault（）; setMessage（事件。目標。分子。信息。值）; 事件。目標。重啟（）; } 返回 （ <> <p>{信息}</ p> <形成 的onsubmit={handleSubmit}> <輸入 名稱=「信息」 類型=「文本」 /> </形成> </> ）; } 正如我們在上面的例子中看到的，我們更新了我們的狀態 信息 使用用戶提交表單後輸入的值，按 輸入，並重置輸入值我們只需使用重置整個表單 重啟（） 形式的方法。
這是正常的DOM操作來讀取值並重置它，沒有什麼特別的React。
受控輸入
現在讓我們談談有趣的部分，控制器輸入/ select / textarea是一個元素，其中值綁定到狀態，我們需要更新狀態以更新用戶看到的輸入值。
功能 形成（） { 常量 （信息， setMessage） = 應對。useState（「」）; 功能 handleSubmit（事件） { 事件。的preventDefault（）; setMessage（「」）; } 功能 handleChange（事件） { setMessage（事件。目標。值）; } 返回 （ <> <p>{信息}</ p> <形成 的onsubmit={handleSubmit}> <輸入 名稱=「信息」 類型=「文本」 的onChange={handleChange} 值={信息} /> </形成> </> ）; } 我們的例子設定了 輸入 價值 信息 附上一個 的onChange 我們稱之為事件監聽器 handleChange，在這個功能裡面我們需要的 event.target.value 我們將收到輸入的新值，即當前值加上用戶鍵入的值，我們調用 setMessage 要更新我們的組件狀態，這將更新內容 p 標籤和價值 輸入 標記以匹配新狀態。
如果我們想重置我們可以調用的輸入 setMessage（ 「」），就像我們一樣 handleSubmit，這將重置狀態，並這樣做輸入的值和 p 內容。
添加簡單驗證
現在讓我們添加一個簡單的驗證，複雜的驗證是相似的，但有更多的規則，在這種情況下，如果特殊字元，我們將使輸入無效 _ 用來。
功能 形成（） { 常量 （信息， setMessage） = 應對。useState（「」）; 常量 （錯誤， SETERROR） = 應對。useState（空值）; 功能 handleSubmit（事件） { 事件。的preventDefault（）; SETERROR（空值）; setMessage（「」）; } 功能 handleChange（事件） { 常量 值 = 事件。目標。值; 如果 （值。包括（「_」）） SETERROR（「你不能使用下劃線」）; 其他 SETERROR（空值）; setMessage（值）; } 返回 （ <> <p>{信息}</ p> <形成 的onsubmit={handleSubmit}> <輸入 ID=「信息」 名稱=「信息」 類型=「文本」 的onChange={handleChange} 值={信息} /> {錯誤 && （ <標籤 樣式={{ 顏色： 「紅色」 }} htmlFor=「信息」> {錯誤} </標籤> ）} </形成> </> ）; } 我們創建兩個狀態，一個用於輸入值，另一個用於錯誤消息。和我們之前一樣 handleSubmit 我們會重置 信息 狀態為空字元串，另外我們將重置 錯誤 國家 空值。
在裡面 handleChange 我們將讀取輸入的新值並查看下劃線是否存在。如果我們找到下劃線，我們會將錯誤狀態更新為消息 「你不能使用下劃線」 如果不存在，我們會將其設置為 空值。驗證後我們將更新 信息 以新價值陳述。
在我們返回的UI中，我們將檢查是否存在 錯誤 並呈現一個 標籤 文本顏色紅色指向輸入並顯示內部錯誤消息。錯誤位於標籤內，讓用戶單擊它並將焦點移動到輸入。
控制Textarea
在我說與之合作之前 輸入 和 textarea的 是相似的，它實際上是，讓我們改變我們渲染的元素 textarea的，我們上面的代碼將繼續工作，沒有任何其他更改，如下所示。
功能 形成（） { 常量 （信息， setMessage） = 應對。useState（「」）; 常量 （錯誤， SETERROR） = 應對。useState（空值）; 功能 handleSubmit（事件） { 事件。的preventDefault（）; } 功能 handleChange（事件） { 常量 值 = 事件。目標。值; 如果 （值。包括（「_」）） { SETERROR（「你不能使用下劃線」）; } 其他 { SETERROR（空值）; setMessage（值）; } } 返回 （ <> <p>{信息}</ p> <形成 的onsubmit={handleSubmit}> <textarea的 ID=「信息」 名稱=「信息」 的onChange={handleChange} 值={信息} /> {錯誤 && （ <標籤 樣式={{ 顏色： 「紅色」 }} htmlFor=「信息」> {錯誤} </標籤> ）} </形成> </> ）; } 雖然通常 textarea的 是一個內部內容為的元素 在React中改變我們使用的值 值 支柱就像一個輸入和 的onChange 事件，使輸入和textarea之間的變化相似。
控制選擇
現在讓我們來談談 選擇。和。一樣 textarea的 你把它視為正常 輸入通過一個 值 支持選定的值並聽取值的變化 的onChange。傳遞給的值 選擇 應匹配其中一個選項的值，以將其中一個顯示為當前選定的選項。
功能 形成（） { 常量 （選項， 的SetOption） = 應對。useState（空值）; 常量 （錯誤， SETERROR） = 應對。useState（空值）; 功能 handleSubmit（事件） { 事件。的preventDefault（）; } 功能 handleChange（事件） { 的SetOption（事件。目標。值）; } 功能 handleResetClick（） { 的SetOption（空值）; } 功能 handleHooksClick（） { 的SetOption（「掛鉤」）; } 返回 （ <> <p>{選項}</ p> <形成 的onsubmit={handleSubmit}> <選擇 的onChange={handleChange} 值={選項}> <選項 值=「類」>類</選項> <選項 值=「流量」>助焊劑</選項> <選項 值=「終極版」>終極版</選項> <選項 值=「掛鉤」>鉤</選項> </選擇> </形成> <按鍵 類型=「按鈕」 的onClick={handleResetClick}> 重啟 </按鈕> <按鍵 類型=「按鈕」 的onClick={handleHooksClick}> 鉤 </按鈕> </> ）; } 使用文件輸入
現在讓我們談談文件輸入，這個特殊輸入無法控制，但仍然可以獲取一些數據並將其保存在狀態中以便在其他地方顯示。在下面的示例中，我們將為隱藏文件輸入創建自定義UI。
功能 形成（） { 常量 （字FileKey， setFileKey） = 應對。useState（日期。現在（））; 常量 （文件名， setFileName） = 應對。useState（「」）; 常量 （文件大小， setFileSize） = 應對。useState（0）; 常量 （錯誤， SETERROR） = 應對。useState（空值）; 功能 resetFile（） { setFileKey（日期。現在（））; setFileName（「」）; setFileSize（0）; SETERROR（空值）; } 功能 handleChange（事件） { 常量 文件 = 事件。目標。檔（0）; setFileSize（文件。尺寸）; 如果 （文件。尺寸 > 100000） SETERROR（「那個文件太大了」）; 其他 SETERROR（空值）; setFileName（文件。名稱）; } 返回 （ <形成> <標籤 htmlFor=「文件」> 選擇 一個 單 文件 至 上載。 （最大 尺寸： 100KB） <BR /> {文件名 && （ <> <強大>文件：</ strong> {fileName} （{文件大小 / 1000}KB） </> ）} <輸入 ID=「文件」 類型=「文件」 鍵={字FileKey} 的onChange={handleChange} 樣式={{ 顯示： 「沒有」 }} /> </標籤> {錯誤 && （ <標籤 樣式={{ 顏色： 「紅色」 }} htmlFor=「文件」> {錯誤} </標籤> ）} <按鍵 類型=「按鈕」 的onClick={resetFile}> 重啟 文件 </按鈕> </形成> ）; } 我們監聽更改事件並讀取文件大小和名稱並驗證文件的大小，如果它太大我們設置 錯誤 說明消息 「那個文件太大了」，如果文件不是那麼大，我們會將錯誤設置為 空值，如果用戶之前選擇了一個大文件，這就讓我們刪除以前的錯誤。
我們還有一個重置輸入的按鈕，因為我們無法控制我們可以使用的狀態 鍵 強制React再次渲染輸入並在此過程中重置它，我們使用當前日期和每次用戶點擊 重置文件 它將獲取當前日期並將其保存到 字FileKey 狀態並重置輸入。