复用事件处理函数

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