React 表單
就像在 HTML 中一樣，React 使用表單允許使用者與網頁進行互動。
在 React 中新增表單
您像新增任何其他元素一樣在 React 中新增表單
示例
新增一個表單，允許使用者輸入他們的姓名
function MyForm() {
return (
<form>
<label>Enter your name:
<input type="text" />
</label>
</form>
)
}
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<MyForm />);
這會正常工作，表單將提交併且頁面將重新整理。
但這通常不是我們希望在 React 中發生的事情。
我們希望阻止這種預設行為，並讓 React 控制表單。
處理表單
處理表單是指當資料改變值或被提交時，您如何處理這些資料。
在 HTML 中，表單資料通常由 DOM 處理。
在 React 中，表單資料通常由元件處理。
當資料由元件處理時，所有資料都儲存在元件狀態中。
您可以透過在 onChange 屬性中新增事件處理程式來控制更改。
我們可以使用 useState Hook 來跟蹤每個輸入的值，併為整個應用程式提供“單一資料來源”。
有關 Hook 的更多資訊，請參閱 React Hook 部分。
示例
使用 useState Hook 管理輸入
import { useState } from 'react';
import ReactDOM from 'react-dom/client';
function MyForm() {
const [name, setName] = useState("");
return (
<form>
<label>Enter your name:
<input
type="text"
value={name}
onChange={(e) => setName(e.target.value)}
/>
</label>
</form>
)
}
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<MyForm />);
提交表單
您可以透過在 <form> 的 onSubmit 屬性中新增事件處理程式來控制提交操作
示例
新增一個提交按鈕並在 onSubmit 屬性中新增一個事件處理程式
import { useState } from 'react';
import ReactDOM from 'react-dom/client';
function MyForm() {
const [name, setName] = useState("");
const handleSubmit = (event) => {
event.preventDefault();
alert(`The name you entered was: ${name}`)
}
return (
<form onSubmit={handleSubmit}>
<label>Enter your name:
<input
type="text"
value={name}
onChange={(e) => setName(e.target.value)}
/>
</label>
<input type="submit" />
</form>
)
}
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<MyForm />);
多個輸入欄位
您可以透過為每個元素新增一個 name 屬性來控制多個輸入欄位的值。
我們將用一個空物件初始化我們的狀態。
要訪問事件處理程式中的欄位，請使用 event.target.name 和 event.target.value 語法。
要更新狀態，請在屬性名稱周圍使用方括號 [bracket notation]。
示例
編寫一個包含兩個輸入欄位的表單
import { useState } from 'react';
import ReactDOM from 'react-dom/client';
function MyForm() {
const [inputs, setInputs] = useState({});
const handleChange = (event) => {
const name = event.target.name;
const value = event.target.value;
setInputs(values => ({...values, [name]: value}))
}
const handleSubmit = (event) => {
event.preventDefault();
alert(inputs);
}
return (
<form onSubmit={handleSubmit}>
<label>Enter your name:
<input
type="text"
name="username"
value={inputs.username || ""}
onChange={handleChange}
/>
</label>
<label>Enter your age:
<input
type="number"
name="age"
value={inputs.age || ""}
onChange={handleChange}
/>
</label>
<input type="submit" />
</form>
)
}
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<MyForm />);注意：我們為兩個輸入欄位使用相同的事件處理函式，我們可以為每個欄位編寫一個事件處理函式，但這會使我們的程式碼更簡潔，並且是 React 中首選的方式。
Textarea
React 中的 textarea 元素與普通 HTML 略有不同。
在 HTML 中，textarea 的值是起始標籤 <textarea> 和結束標籤 </textarea> 之間的文字。
<textarea>
Content of the textarea.
</textarea>在 React 中，textarea 的值放在 value 屬性中。我們將使用 useState Hook 來管理 textarea 的值
示例
一個帶有一些內容的簡單文字區域
import { useState } from 'react';
import ReactDOM from 'react-dom/client';
function MyForm() {
const [textarea, setTextarea] = useState(
"The content of a textarea goes in the value attribute"
);
const handleChange = (event) => {
setTextarea(event.target.value)
}
return (
<form>
<textarea value={textarea} onChange={handleChange} />
</form>
)
}
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<MyForm />);選擇
在 React 中，下拉列表或選擇框也與 HTML 有點不同。
在 HTML 中，下拉列表中選定的值透過 selected 屬性定義
HTML
<select>
<option value="Ford">Ford</option>
<option value="Volvo" selected>Volvo</option>
<option value="Fiat">Fiat</option>
</select>在 React 中，選定的值透過 select 標籤上的 value 屬性定義
示例
一個簡單的選擇框，其中選定的值“Volvo”在建構函式中初始化
function MyForm() {
const [myCar, setMyCar] = useState("Volvo");
const handleChange = (event) => {
setMyCar(event.target.value)
}
return (
<form>
<select value={myCar} onChange={handleChange}>
<option value="Ford">Ford</option>
<option value="Volvo">Volvo</option>
<option value="Fiat">Fiat</option>
</select>
</form>
)
}
透過對 <textarea> 和 <select> 進行這些微小更改，React 能夠以相同的方式處理所有輸入元素。
