1. 在React中，有時一個組件中會有多個事件處理函數，代碼格式上差別不大，這樣往往會造成重復的編寫類似的代碼

handleChange1...
handleChange2...
handleChange3...

• 多事件處理函數示例

    class ConstrolInput extends React.Component {
      constructor(props) {
        super(props);
        this.state = {
          name: 'hello world',
          selected: 'boy',
          checked: false
        };

        this.handleSubmit = this.handleSubmit.bind(this);
        this.handleInput = this.handleInput.bind(this);
        this.handleSelected = this.handleSelected.bind(this);
        this.handleCheck = this.handleCheck.bind(this);
      }
      handleSubmit(event) {
        event.preventDefault(); 
        console.log(this.state);
      }
      handleInput(e) {
        this.setState({name: e.target.value});
      }
      handleSelected(e) {
        this.setState({selected: e.target.value});
      }
      handleCheck(e) {
        this.setState({checked: e.target.checked});
      }
      render() {
        return (
          <form onSubmit={this.handleSubmit}>
            <p>
              <input defaultValue={this.state.name} onChange={this.handleInput} />
            </p>
            <p>
              <select value={this.state.selected} onChange={this.handleSelected}>
                <option value="boy">男</option>
                <option value="girl">女</option>
              </select>
            </p>
            <p>
              <label>
                <input type="checkbox" checked={this.state.checked} onChange={this.handleCheck} />
                請閱讀條款
              </label>
              <button type="submit">Alert</button>
            </p>
          </form>
        );
      }
    }

2. 解決的方法是將這類處理函數整合成一個函數onChange={this.handleChange}

• bind 復用: 利用bind在綁定this的時候能預先傳入參數的特性

    class ConstrolInput extends React.Component {
      constructor(props) {
        super(props);
        this.state = {
          name: 'hello world',
          selected: 'boy',
          checked: false
        };

        this.handleSubmit = this.handleSubmit.bind(this);
      }
      handleSubmit(event) {
        event.preventDefault(); 
        console.log(this.state);
      }
      handleChange(name, event) {
        let newState= {};
        newState[name] = name === "checked" ? event.target.checked
          : event.target.value;
        this.setState(newState);
      }
      render() {
        return (
          <form onSubmit={this.handleSubmit}>
            <p>
              <input defaultValue={this.state.name} onChange={this.handleChange.bind(this, 'name')} />
            </p>
            <p>
              <select value={this.state.selected} onChange={this.handleChange.bind(this, 'selected')}>
                <option value="boy">男</option>
                <option value="girl">女</option>
              </select>
            </p>
            <p>
              <label>
                <input type="checkbox" checked={this.state.checked} onChange={this.handleChange.bind(this, 'checked')} />
                請閱讀條款
              </label>
              <button type="submit">Alert</button>
            </p>
          </form>
        );
      }
    }

• name 復用：設置對應的 name 屬性

    class ConstrolInput extends React.Component {
      constructor(props) {
        super(props);
        this.state = {
          name: 'hello world',
          selected: 'boy',
          checked: false
        };

        this.handleSubmit = this.handleSubmit.bind(this);
        this.handleChange = this.handleChange.bind(this);
      }
      handleSubmit(event) {
        event.preventDefault(); 
        console.log(this.state);
      }
      handleChange(event) {
        let newState= {};
        const name = event.target.name;
        newState[name] = name === 'checked' ? event.target.checked
          : event.target.value;
        this.setState(newState);
      }
      render() {
        return (
          <form onSubmit={this.handleSubmit}>
            <p>
              <input name="name" defaultValue={this.state.name} onChange={this.handleChange} />
            </p>
            <p>
              <select name="selected" value={this.state.selected} onChange={this.handleChange}>
                <option value="boy">男</option>
                <option value="girl">女</option>
              </select>
            </p>
            <p>
              <label>
                <input name="checked" type="checkbox" checked={this.state.checked} onChange={this.handleChange} />
                請閱讀條款
              </label>
              <button type="submit">Alert</button>
            </p>
          </form>
        );
      }
    }