在網站開發時有時候會使用到表單的元件，而表單內大多是採用 input 的欄位來搜集使用者的資料的。因此對於該欄位內的值要如何取用就是我們今天要為大家介紹的內容： Controlled Component 。

Controlled Component

在元件內的表單元素（像是： <input>、<textarea> 和 <select>）當中，將該元素內的值綁定至元件中的 state 並透過 setState() 這個唯一的方法同步更新 state 的值。

所以在表單中的 <input> 綁定 state 的值的話，我們就能輕易地取得目前該元件內的表單元素能夠顯示目前最新的 state ，並且讓畫面和元件的資料都會呈現一樣的資料內容。

下面就直接帶大家來看範例：

input 標籤

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>
    );
  }
}

打開範例程式碼可以發現我們在 <NameForm /> 這個 Class Component 中的 render() 方法內撰寫了 <form> 標籤，並把標籤內 <input> 欄位中的 value 值綁定至元件內部的 state 。

這樣每當這個元件內的 <input> 欄位的值產生變更時，便會觸發 onChange 事件並且執行 handleChange() ，並透過該函式內的 setState() 方法更新 state 內部 value 的值。

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>
          Essay:
          <textarea value={this.state.value} onChange={this.handleChange} />
        </label>
        <input type="submit" value="Submit" />
      </form>
    );
  }
}

在上面這個官網的範例中，我們一樣將 <textarea> 這個標籤內的 value 值綁定到了此元件的 state 中，另外在 constructor() 內去做這個標籤初始值的設定。

所以這個 Class Component <EssayForm /> 也是一個採用 Controlled Component 的元件。

select 標籤

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 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>
    );
  }
}

在 HTML 當中如果使用到選單 <select> 的話，通常我們會使用一個屬性 selected 把該 <option> 做為預設值。但是在 React.js 的 Controlled Component 的概念中，我們一樣是採用 value 的值綁定至元件內的 state 當中，且在元件內的 constructor() 去做 value 預設值的指定。

因此總結下來，如果我們要實作一個 Controlled Component 的話，那就必須要將標單內所有標籤的 value 綁定到元件的 state 當中，這樣才能夠實現表單欄位中的資料有確實更新且能顯示出正確的資料內容。

在 React.js 中的 Form 表單應用和資料綁定就介紹到這邊囉！像以往在 Vue.js 當中可能就要使用 v-model 來達到資料的雙向綁定，而 React.js 就是應用了 Controlled Component 的概念在綁定的。

下一篇！ React Router！
個人覺得路由真的是套件中最好用的東西了，那就敬請期待囉～
有任何問題都非常非常歡迎提出和指教！
我們下篇見ʘ‿ʘ