在前端開發中，雙向數據綁定（Two-way Data Binding）是指視圖（View）與數據模型（Model）之間保持同步：當模型發生變化時，視圖會自動更新；當視圖（用戶輸入）發生變化時，模型也會隨之更新。

在 React 中，并不像某些框架（如 Angular 或 Vue）那樣內置雙向綁定機制，而是通過受控組件（Controlled Components）的方式手動實現。這種方式雖然不如自動綁定直觀，但提供了更強的可控性和可預測性。

本文將詳細講解如何在 React 中實現雙向數據綁定，涵蓋原理、常見表單控件（如文本框、單選框、復選框、下拉框）的處理方式、優化技巧以及最佳實踐。

---

一、React 中雙向綁定的基本原理

1.1 受控組件（Controlled Components）

在 React 中，表單元素（如 <input>、<select> 等）通過將其 value 屬性綁定到組件 state，并通過 onChange 事件更新 state，實現雙向數據綁定。

import React, { useState } from 'react';function TextInputExample() {const [inputValue, setInputValue] = useState('');const handleChange = (event) => {setInputValue(event.target.value);};return (<div><input type="text" value={inputValue} onChange={handleChange} /><p>你輸入的是：{inputValue}</p></div>);
}

解釋： inputValue 是 state，onChange 中實時更新它，value 屬性綁定 state，形成閉環。

---

二、不同類型表單控件的處理

2.1 文本框 <input type="text">

最常見的形式，如上所示，通過 value 和 onChange 實現綁定。

<inputtype="text"value={inputValue}onChange={(e) => setInputValue(e.target.value)}
/>

---

2.2 多行文本框 <textarea>

和 <input> 類似，但 React 使用 value 屬性，而非 HTML 中的 children。

<textareavalue={text}onChange={(e) => setText(e.target.value)}
/>

---

2.3 下拉菜單 <select>

使用 value 屬性綁定當前選項，onChange 監聽用戶選擇。

<select value={selected} onChange={(e) => setSelected(e.target.value)}><option value="apple">蘋果</option><option value="banana">香蕉</option><option value="orange">橘子</option>
</select>

---

2.4 單選按鈕 <input type="radio">

為每個單選項賦予相同的 name 屬性，并綁定 checked 屬性。

function RadioExample() {const [gender, setGender] = useState('male');return (<><label><inputtype="radio"value="male"checked={gender === 'male'}onChange={(e) => setGender(e.target.value)}/>男</label><label><inputtype="radio"value="female"checked={gender === 'female'}onChange={(e) => setGender(e.target.value)}/>女</label></>);
}

---

2.5 復選框 <input type="checkbox">

對于單個復選框，使用 checked 屬性；多個復選框通常綁定數組。

// 單個
<inputtype="checkbox"checked={isChecked}onChange={(e) => setIsChecked(e.target.checked)}
/>// 多個（如興趣列表）
const [interests, setInterests] = useState([]);const handleCheck = (e) => {const value = e.target.value;setInterests(prev =>prev.includes(value)? prev.filter(i => i !== value): [...prev, value]);
};<inputtype="checkbox"value="music"checked={interests.includes("music")}onChange={handleCheck}
/>

---

三、使用自定義 Hook 簡化綁定邏輯

為減少重復代碼，可以封裝一個 useInput Hook：

function useInput(initialValue) {const [value, setValue] = useState(initialValue);const onChange = (e) => setValue(e.target.value);return { value, onChange };
}// 使用
const nameInput = useInput('');
<input type="text" {...nameInput} />

---

四、雙向綁定的優勢與注意事項

優勢：

• 保證 UI 和數據一致性
• 控制性強：可實時驗證輸入、格式化、限制長度等
• 與其他 state 邏輯無縫集成

注意事項：

• 不要混用受控和非受控模式：即一個組件不能既使用 defaultValue 又使用 value。
• 性能優化：頻繁更新 state 可能導致性能問題，可使用 debounce、throttle 控制頻率。
• 表單狀態管理：復雜表單推薦使用 react-hook-form、Formik 等庫集中管理狀態。

---

五、雙向綁定與第三方表單庫

當表單變得復雜時，建議使用表單管理庫如：

• react-hook-form：輕量、高性能、易于集成
• Formik：成熟、社區活躍、支持復雜驗證

使用 react-hook-form 簡單例子：

import { useForm } from 'react-hook-form';function App() {const { register, handleSubmit } = useForm();const onSubmit = (data) => console.log(data);return (<form onSubmit={handleSubmit(onSubmit)}><input {...register("username")} /><input type="submit" /></form>);
}

---

六、總結

在 React 中，表單雙向數據綁定的實現并非通過“自動綁定”機制，而是通過 state 與表單控件的 value/checked 和 onChange 手動綁定。這種方式雖然繁瑣，但可控性和靈活性極高。掌握這種綁定方式是構建穩定、高質量 React 表單組件的基礎。對于大型復雜表單，推薦結合表單庫簡化管理，提高開發效率與可維護性。