官方文檔：https://react.docschina.org/docs/forms.html

在 HTML 中，表單元素（如<input>、 <textarea> 和 <select>）之類的表單元素通常自己維護 state，并根據(jù)用戶輸入進行更新。而在 React 中，可變狀態(tài)（mutable state）通常保存在組件的 state 屬性中，并且只能通過使用 setState()來更新。
我們可以把兩者結(jié)合起來，使 React 的 state 成為“唯一數(shù)據(jù)源”。渲染表單的 React 組件還控制著用戶輸入過程中表單發(fā)生的操作。被 React 以這種方式控制取值的表單輸入元素就叫做“受控組件”。

寫一個普通表單：

<form>
  <label>
    名字:
    <input type="text" name="name" />
  </label>
  <input type="submit" value="提交" />
</form>

將表單寫為受控組件，我們可以在提交時打印出名稱等操作：

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('提交的名字: ' + this.state.value);
    event.preventDefault(); // 阻止表單提交的默認(rèn)事件
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          名字:
          <input type="text" value={this.state.value} onChange={this.handleChange} />
        </label>
        <input type="submit" value="提交" />
      </form>
    );
  }
}

由于在表單元素上設(shè)置了 value 屬性，因此顯示的值將始終為 this.state.value，這使得 React 的 state 成為唯一數(shù)據(jù)源。由于 handlechange 在每次按鍵時都會執(zhí)行并更新 React 的 state，因此顯示的值將隨著用戶輸入而更新。

對于受控組件來說，輸入的值始終由 React 的 state 驅(qū)動。

其它標(biāo)簽實現(xiàn)受控組件

<input type="text">, <textarea> 和 <select> 之類的標(biāo)簽都非常相似—它們都接受一個 value 屬性，你可以使用它來實現(xiàn)受控組件。

textarea

<form onSubmit={this.handleSubmit}>
    <label>
       文章:
       <textarea value={this.state.value} onChange={this.handleChange} />
    </label>
    <input type="submit" value="提交" />
</form>

select

<form onSubmit={this.handleSubmit}>
   <label>
      選擇你喜歡的風(fēng)味:
      <select value={this.state.value} onChange={this.handleChange}>
        <option value="grapefruit">葡萄柚</option>
        <option value="lime">酸橙</option>
        <option value="coconut">椰子</option>
        <option value="mango">芒果</option>
      </select>
    </label>
    <input type="submit" value="提交" />
</form>

處理多個輸入

當(dāng)需要處理多個 input 元素時，我們可以給每個元素添加 name 屬性，并讓處理函數(shù)根據(jù) event.target.name 的值選擇要執(zhí)行的操作。
例如：

handleInputChange(event) {
    const target = event.target;
    const value = target.name === 'isGoing' ? target.checked : target.value;
    const name = target.name;

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

  render() {
    return (
      <form>
        <label>
          參與:
          <input
            name="isGoing"
            type="checkbox"
            checked={this.state.isGoing}
            onChange={this.handleInputChange} />
        </label>
        <br />
        <label>
          來賓人數(shù):
          <input
            name="numberOfGuests"
            type="number"
            value={this.state.numberOfGuests}
            onChange={this.handleInputChange} />
        </label>
      </form>
    );
  }

受控輸入空值

在受控組件上指定 value 的 prop 會阻止用戶更改輸入。如果你指定了 value，但輸入仍可編輯，則可能是你意外地將value 設(shè)置為 undefined 或 null。

下面的代碼演示了這一點。（輸入最初被鎖定，但在短時間延遲后變?yōu)榭删庉?。?/p>

// 指定value的值為'hi'的時候輸入框不可編輯
ReactDOM.render(<input value="hi" />, mountNode);

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

受控組件的替代品

有時使用受控組件會很麻煩，因為你需要為數(shù)據(jù)變化的每種方式都編寫事件處理函數(shù)，并通過一個 React 組件傳遞所有的輸入 state。在這些情況下，你可能希望使用非受控組件(ref), 這是實現(xiàn)輸入表單的另一種方式。