&emsp;&emsp;表單元素是一類擁有內部狀態的元素，這些狀態由其自身維護，通過這類元素可讓用戶與Web應用進行交互。HTML中的表單元素（例如\<input>、\<select>和\<radio>等）在React中都有相應的組件實現，不僅如此，React還將它們分成兩種：受控組件和非受控組件。 ## 一、受控組件 &emsp;&emsp;受控組件（Controlled Component）是指那些受React控制的表單元素，其狀態（value、checked等屬性）的變更由組件的state管理。對于不同的表單元素，其受控組件的形式會有所差異，接下來會講解其中的三類。 **1）文本框** &emsp;&emsp;常用的單行文本框是一個type屬性為“text”的\<input>元素，它的值（即狀態）由value屬性控制。如果要監聽文本框的狀態變化，那么可以像下面這樣操作。 ~~~js class Text extends React.Component { constructor(props) { super(props); this.state = {value: "init"}; this.handle = this.handle.bind(this); } handle(e) { this.setState({value: e.target.value.toUpperCase()}); } render() { return <input value={this.state.value} onChange={this.handle} type="text" />; } } ~~~ &emsp;&emsp;上述代碼實現了一個簡單的功能，在改變文本框中的內容時，自動將其轉換成大寫字母。具體的更新過程可分為四步： &emsp;&emsp;（1）在構造函數中初始化組件的state，并為文本框設置默認值。 &emsp;&emsp;（2）文本框注冊onChange事件，監聽其值的變化。 &emsp;&emsp;（3）在事件處理程序handle()中，通過e.target.value讀取到輸入的值，修改并同步（調用this.setState()方法）到組件的state中。 &emsp;&emsp;（4）組件重新渲染，完成文本框的內容更新。 &emsp;&emsp;其他兩類受控組件的更新過程與之類似，只是在細節處理上有所不同。 &emsp;&emsp;觀察上面的示例可以發現，文本框的數據來源于組件的state，通過onChange事件將輸入的新數據再同步給組件的state，從而完成了一次雙向數據綁定。 &emsp;&emsp;React中的\<textarea>元素（多行文本框），其使用類似于上面的\<input>元素，也是通過value屬性來獲取值的，如下代碼所示，省略了構造函數和事件處理程序。 ~~~js class TextArea extends React.Component { render() { return <textarea value={this.state.value} onChange={this.handle} />; } } ~~~ &emsp;&emsp;而HTML中的\<textarea>元素則會將值定義成子元素，并且包含結束標簽，如下所示。 ~~~html <textarea>init</textarea> ~~~ **2）單選框和復選框** &emsp;&emsp;單選框是一個type屬性為“radio”的\<input>元素，復選框是一個type屬性為“checkbox”的\<input>元素。與之前的文本框不同，React控制的不是它們的值，而是選中狀態，即布爾屬性checked。在下面的例子中，監聽了每個單選框的checked屬性。 ~~~js class Radio extends React.Component { constructor(props) { super(props); this.state = { gender: "" }; this.handle = this.handle.bind(this); } handle(e) { this.setState({ gender: e.target.value }); } render() { return ( <> <input name="gender" value="1" onChange={this.handle} type="radio" checked={this.state.gender == "1"} />男 <input name="gender" value="2" onChange={this.handle} type="radio" checked={this.state.gender == "2"} />女 </> ); } } ~~~ &emsp;&emsp;復選框能選中多個項，其操作要比單選框繁瑣許多。在下面的例子中，不但監聽了每個復選框的checked屬性，還將處于選中狀態的值提取了出來，組成一個數組。 ~~~js class Checkbox extends React.Component { constructor(props) { super(props); this.state = { colors: [] }; //保存復選框值的數組 this.handle = this.handle.bind(this); } handle(e) { const { checked, value } = e.target; let { colors } = this.state; if (checked && colors.indexOf(value) == -1) { colors.push(value); //已選中并且數組中未有該值，就在末尾插入 } else { colors = colors.filter(item => item != value); //未選中，就將該值過濾掉 } this.setState({ colors }); } render() { return ( <> <input name="colors" value="1" onChange={this.handle} type="checkbox" checked={this.state.colors.indexOf("1") >= 0} />紅 <input name="colors" value="2" onChange={this.handle} type="checkbox" checked={this.state.colors.indexOf("2") >= 0} />綠 <input name="colors" value="3" onChange={this.handle} type="checkbox" checked={this.state.colors.indexOf("3") >= 0} />藍 </> ); } } ~~~ &emsp;&emsp;雖然React處理單選框和復選框的方式要比在HTML中復雜一點，但是保證了組件的state是元素狀態的唯一來源，進而讓更新過程更加可靠和可控。 **3）選擇框** &emsp;&emsp;在HTML中，\<select>元素（選擇框）會包含多個用來表示選項的\<option>元素，而選中的項會被定義一個selected屬性，如下代碼所示，第二個\<option>元素處于選中狀態。 ~~~html <select> <option value="1">strick</option> <option value="2" selected>freedom</option> <option value="3">jane</option> </select> ~~~ &emsp;&emsp;在React中，只需對\<select>元素定義value屬性就能決定當前的選中項，如下代碼所示，這比用DOM的方式操作選項要簡潔得多。 ~~~js class Select extends React.Component { constructor(props) { super(props); this.state = { value: "" }; this.handle = this.handle.bind(this); } handle(e) { this.setState({ value: e.target.value }); } render() { return ( <select value={this.state.value} onChange={this.handle}> <option value="1">strick</option> <option value="2">freedom</option> <option value="3">jane</option> </select> ); } } ~~~ &emsp;&emsp;只要給\<select>元素添加multiple屬性并將其賦為true就能變為多選，如下代碼所示，此時傳給value屬性的是一個數組。 ~~~js class MulSelect extends React.Component { constructor(props) { super(props); this.state = { values: [] }; this.handle = this.handle.bind(this); } handle(e) { const { options } = e.target; //options是一個類數組對象 const values = Object.keys(options) //將options的索引組成一個數組 .filter(i => options[i].selected) //過濾出選中項 .map(i => options[i].value); //提取選中項組成新數組 this.setState({ values }); } render() { return ( <select value={this.state.values} onChange={this.handle} multiple={true}> <option value="1">strick</option> <option value="2">freedom</option> <option value="3">jane</option> </select> ); } } ~~~ ## 二、非受控組件 &emsp;&emsp;非受控組件（Uncontrolled Component）的定義正好與受控組件的相左，其狀態由自己管理，通常使用ref屬性（[第5篇](https://www.cnblogs.com/strick/p/10593862.html)中講解過）獲取表單元素的值。在下面的示例中，文本框在失去焦點時，能自動將其內容轉換成大寫字母。如果用受控組件的形式完成相同的功能，那么會較為繁瑣。 ~~~js class Text extends React.Component { constructor(props) { super(props); this.handle = this.handle.bind(this); } handle() { this.input.value = this.input.value.toUpperCase(); } render() { return <input onBlur={this.handle} type="text" ref={ input => {this.input = input}}/>; } } ~~~ &emsp;&emsp;在render()方法中，首先為文本框注冊onBlur事件，然后定義ref屬性，其值是一個回調函數。當組件被掛載時，就會執行該回調函數，然后就能讓this.input指向一個文本框，從而在事件處理程序handle()中就能通過this.input讀取到文本框中的內容。 &emsp;&emsp;在React中，有一個表單元素比較特殊，那就是上傳按鈕。它只有非受控組件的形式，因為其值只能由用戶傳入，不能被組件的state所控制。 **1）默認值** &emsp;&emsp;如果要指定非受控組件的默認值，那么可通過定義defaultValue或defaultChecked屬性實現，前者適用于文本框、選擇框等元素，后者適用于單選框和復選框。下面的示例分別給文本框和單選框設置了默認值，為了便于觀察，只放出了關鍵代碼。 ~~~js class Text extends React.Component { render() { return <input type="text" defaultValue="init"/>; } } class Radio extends React.Component { render() { return ( <> <input name="gender" value="1" type="radio"/>男 <input name="gender" value="2" type="radio" defaultChecked={true}/>女 </> ); } } ~~~ ***** > 原文出處： [博客園-React躬行記](https://www.cnblogs.com/strick/category/1455720.html) [知乎專欄-React躬行記](https://zhuanlan.zhihu.com/pwreact) 已建立一個微信前端交流群，如要進群，請先加微信號freedom20180706或掃描下面的二維碼，請求中需注明“看云加群”，在通過請求后就會把你拉進來。還搜集整理了一套[面試資料](https://github.com/pwstrick/daily)，歡迎瀏覽。  推薦一款前端監控腳本：[shin-monitor](https://github.com/pwstrick/shin-monitor)，不僅能監控前端的錯誤、通信、打印等行為，還能計算各類性能參數，包括 FMP、LCP、FP 等。