HTML表單元素與React中的其他DOM元素有點(diǎn)不同，因?yàn)楸韱卧刈匀粫?huì)保留一些內(nèi)部狀態(tài)。例如，這個(gè)純HTML格式的表單接受一個(gè)名稱：

<form>  
    <label>
    Name:    <input type="text" name="name" />  
    </label>  
    <input type="submit" value="Submit" />
</form>

此表單具有用戶提交表單時(shí)瀏覽到新頁(yè)面的默認(rèn)HTML表單行為。如果你想在React中使用這種行為，那就行了。但是在大多數(shù)情況下，使用JavaScript函數(shù)可以方便地處理提交表單并可以訪問(wèn)用戶在表單中輸入的數(shù)據(jù)。實(shí)現(xiàn)這一目標(biāo)的標(biāo)準(zhǔn)方法是使用稱為“受控組件”的技術(shù)。

受控組件

在HTML中，表單元素（例如<input>，<textarea>）<select>通常保持其自己的狀態(tài)并根據(jù)用戶輸入進(jìn)行更新。在React中，可變狀態(tài)通常保存在組件的狀態(tài)屬性中，并且只能使用更新setState()。

我們可以通過(guò)使React狀態(tài)成為“單一真相源”來(lái)結(jié)合這兩者。然后，呈現(xiàn)表單的React組件也控制后續(xù)用戶輸入中以該表單發(fā)生的事情。輸入表單元素的值由React以這種方式控制，稱為“受控組件”。

例如，如果我們想讓前面的示例在提交時(shí)記錄名稱，我們可以將表單編寫(xiě)為受控組件：

class NameForm extends React.Component {  
    constructor(props) {    
        super(props);    
        this.state = {value: ''};    
        this.handleChange = this.handleChange.bind(this);    
        this.handleSubmit = this.handleSubmit.bind(this);  
        }  
    handleChange(event) {    
        this.setState({value: event.target.value});  }  
    handleSubmit(event) {    
        alert('A name was submitted: ' + this.state.value);
        event.preventDefault();  
        }  
    render() {    
        return (      
            <form onSubmit={this.handleSubmit}>        
                <label>Name:<input type="text" value={this.state.value} onChange={this.handleChange} /></label>        
                <input type="submit" value="Submit" />      
            </form>    );  
            }
}

由于value屬性設(shè)置在我們的表單元素上，因此顯示的值將始終為this.state.value，使React狀態(tài)成為真值的來(lái)源。由于handleChange每次擊鍵時(shí)都會(huì)運(yùn)行以更新React狀態(tài)，因此顯示的值將隨用戶鍵入而更新。

對(duì)于受控組件，每個(gè)狀態(tài)變異都會(huì)有一個(gè)關(guān)聯(lián)的處理函數(shù)。這使修改或驗(yàn)證用戶輸入變得非常簡(jiǎn)單。例如，如果我們想強(qiáng)制使用全部大寫(xiě)字母來(lái)編寫(xiě)名稱，我們可以這樣寫(xiě)handleChange：

handleChange(event) {  this.setState({value: event.target.value.toUpperCase()});}

textarea標(biāo)簽

在HTML中，一個(gè)<textarea>元素通過(guò)子元素定義其文本：

<textarea>
  Hello there, this is some text in a text area</textarea>

在React中， 改為<textarea>使用value屬性。這樣，使用a的表單<textarea>可以非常類似于使用單行輸入的表單：

class EssayForm extends React.Component {  
    constructor(props) {    
        super(props);    
        this.state = {value: 'Please write an essay about your favorite DOM element.'    };    
        this.handleChange = this.handleChange.bind(this);    
        this.handleSubmit = this.handleSubmit.bind(this);  }  
        handleChange(event) {    this.setState({value: event.target.value});  }  
        handleSubmit(event) {    alert('An essay was submitted: ' + this.state.value);event.preventDefault();  }  
        render() {    
            return (      
                <form onSubmit={this.handleSubmit}>        
                <label>Name:<textarea value={this.state.value} onChange={this.handleChange} /></label>        
                <input type="submit" value="Submit" />      
                </form>    );  
                }
}

注意this.state.value在構(gòu)造函數(shù)中初始化，以便文本區(qū)域以其中的一些文本開(kāi)始。

選擇標(biāo)簽

在HTML中，<select>創(chuàng)建一個(gè)下拉列表。例如，這個(gè)HTML創(chuàng)建一個(gè)下拉列表：

<select>  
    <option value="grapefruit">Grapefruit</option>  
    <option value="lime">Lime</option>  
    <option selected value="coconut">Coconut</option>  
    <option value="mango">Mango</option>
</select>

請(qǐng)注意，由于selected屬性，Coconut選項(xiàng)最初被選中。反應(yīng)，而不是使用此selected屬性，使用value根select標(biāo)簽上的屬性。這在受控組件中更方便，因?yàn)槟恍枰谝粋€(gè)位置更新它。例如：

class FlavorForm extends React.Component {  
    constructor(props) {    
        super(props);    
        this.state = {value: 'coconut'};    
        this.handleChange = this.handleChange.bind(this);    
        this.handleSubmit = this.handleSubmit.bind(this);  }  
        handleChange(event) {    
            this.setState({value: event.target.value});  }  
        handleSubmit(event) {    
            alert('Your favorite flavor is: ' + this.state.value);
            event.preventDefault();  }  
        render() {    
            return (      
                <form onSubmit={this.handleSubmit}>
                <label>Pick your favorite La Croix flavor:
                <select value={this.state.value} onChange={this.handleChange}>
                <option value="grapefruit">Grapefruit</option>            
                <option value="lime">Lime</option>            
                <option value="coconut">Coconut</option>            
                <option value="mango">Mango</option>          
                </select>        
                </label>        
                <input type="submit" value="Submit" />      
                </form>    );  
                }
}

總的來(lái)說(shuō)，這使得它，這樣<input type="text">，<textarea>和<select>所有的工作非常相似-他們都接受value，你可以用它來(lái)實(shí)現(xiàn)控制組件屬性。

注意您可以將數(shù)組傳遞給該value屬性，從而允許您在select標(biāo)簽中選擇多個(gè)選項(xiàng)：<select multiple = {true} value = {'B'，'C'}>

處理多個(gè)輸入

當(dāng)需要處理多個(gè)受控input元素時(shí)，可以name為每個(gè)元素添加一個(gè)屬性，并讓處理函數(shù)根據(jù)值來(lái)選擇要執(zhí)行的操作event.target.name。

例如：

class Reservation extends React.Component {  constructor(props) {    super(props);    this.state = {
      isGoing: true,
      numberOfGuests: 2    };    
          this.handleInputChange = this.handleInputChange.bind(this);  
          }  
      handleInputChange(event) {    
          const target = event.target;    
          const value = target.type === 'checkbox' ? target.checked : target.value;    
          const name = target.name;    
          this.setState({      [name]: value    });  }  
          render() {    
              return (      
                  <form>        
                      <label>
                      Is going:          
                      <input
                        name="isGoing"
                        type="checkbox"
                        checked={this.state.isGoing}
                        onChange={this.handleInputChange} />        
                        </label>        <br />        
                        <label>
                        Number of guests:          <input
                        name="numberOfGuests"
                        type="number"
                        value={this.state.numberOfGuests}
                        onChange={this.handleInputChange} />        
                        </label>      
                    </form>    );  
                    }
}

請(qǐng)注意，我們?nèi)绾问褂肊S6 計(jì)算的屬性名稱語(yǔ)法來(lái)更新與給定輸入名稱對(duì)應(yīng)的狀態(tài)鍵：

this.setState({  [name]: value});

它相當(dāng)于這個(gè)ES5代碼：

var partialState = {};partialState[name] = value;this.setState(partialState);

此外，由于setState()自動(dòng)將局部狀態(tài)合并到當(dāng)前狀態(tài)，因此我們只需要用改變的部分調(diào)用它。

受控輸入空值

在受控組件上指定值prop可以防止用戶更改輸入，除非您愿意。如果您已指定a value但輸入仍可編輯，則可能意外設(shè)置value為undefined或null。

以下代碼演示了這一點(diǎn)。（輸入首先被鎖定，但在短暫延遲后變?yōu)榭删庉?。?/p>

ReactDOM.render(<input value="hi" />, mountNode);
setTimeout(function() {
  ReactDOM.render(<input value={null} />, mountNode);}, 1000);

受控組件的替代品

使用受控組件有時(shí)會(huì)非常乏味，因?yàn)槟枰獮閿?shù)據(jù)可以改變的每種方式編寫(xiě)一個(gè)事件處理程序，并通過(guò)React組件管理所有輸入狀態(tài)。當(dāng)您將預(yù)先存在的代碼庫(kù)轉(zhuǎn)換為React或?qū)eact應(yīng)用程序與非React庫(kù)集成時(shí)，這會(huì)變得特別煩人。在這些情況下，您可能需要檢查不受控制的組件，這是實(shí)現(xiàn)輸入表單的另一種技術(shù)。