[ Day 19 ] 表单中的 Controlled Component

在网站开发时有时候会使用到表单的元件，而表单内大多是采用 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！
个人觉得路由真的是套件中最好用的东西了，那就敬请期待罗～
有任何问题都非常非常欢迎提出和指教！
我们下篇见ʘ‿ʘ