ReactJS - 表單程式設計

表單是 Web 應用的常見組成部分，主要用於允許使用者與應用互動。這些表單可能包含在網頁中，用於收集使用者資訊、讓使用者搜尋網站、進行支付等等。表單可以包含的基本元素包括輸入欄位、按鈕、複選框、下拉選單等等。從這些表單中獲得的資料通常由 React 中的元件處理。

要學習如何在 React 中使用表單，讓我們來看一些示例。

表單程式設計

與 HTML 中基於使用者輸入資料更新表單不同，React 使用其狀態來更新表單。可變狀態通常在元件的 state 屬性中指定，並且只能使用 setState() 更新。

表單程式設計的性質需要維護狀態。因為輸入欄位資訊會隨著使用者與表單互動而改變。但正如我們之前瞭解到的，React 庫本身不儲存或維護任何狀態資訊，元件必須使用狀態管理 API 來管理狀態。考慮到這一點，React 提供兩種型別的元件來支援表單程式設計。

受控元件 - 在受控元件中，React 為所有輸入元素提供了一個特殊的屬性 value，並控制輸入元素。value 屬性可用於獲取和設定輸入元素的值。它必須與元件的狀態同步。
非受控元件 - 在非受控元件中，React 對錶單程式設計的支援最少。它必須使用 Ref 概念（另一個 React 概念，用於在執行時獲取 React 元件中的 DOM 元素）來進行表單程式設計。

本章讓我們學習使用受控和非受控元件進行表單程式設計。

列印頁面