在React组件中处理多个onChange回调

Question

这就是我目前使用两个输入框处理场景的方式.作为每个人的单独更新方法.可以/应该用一种handleChange方法来完成吗？

https://codepen.io/r11na/pen/bZKOpj?editors=0011

class App extends React.Component {
  constructor(props) {
    super(props);

    this.handleChange1 = this.handleChange1.bind(this);
    this.handleChange2 = this.handleChange2.bind(this);

    this.state = {
      name1: '',
      name2: ''
    };
  };

  handleChange1(e) {
    this.setState({
      name1: e.target.value
    });
  };

  handleChange2(e) {
    this.setState({
      name2: e.target.value
    });
  };

  render() {
    return (
      <div class="row column">
        <Label name={this.state.name1}/>
        <Input onChange={this.handleChange1} />
        <Label name={this.state.name2}/>
        <Input onChange={this.handleChange2} />
      </div>
    );
  };
}

const Label = props => (
  <p {...props}>Hello: <span className="label-name">{props.name}</span></p>
);

const Input = props => (
  <input placeholder="Enter your name" {...props} type="text" /> 
);

ReactDOM.render(<App />, document.getElementById('app'))

Answer 1

可以/应该用一个handleChange方法来完成吗？

您可以像这样简化代码.

class App extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      name1: '',
      name2: ''
    };
  };

  handleChange(e, name) {
    this.setState({ [name]: e.target.value });
  };

  render() {
    return (
      <div class="row column">
        <Label name={this.state.name1}/>
        <Input onChange={ (e) => this.handleChange(e, 'name1') } />
        <Label name={this.state.name2}/>
        <Input onChange={ (e) => this.handleChange(e, 'name2')  } />
      </div>
    );
  };
}

Example

谢谢你@Alik提到的关于eslint规则jsx-no-bind,

JSX prop中的绑定调用或箭头函数将在每个渲染上创建一个全新的函数.这对性能不利,因为它会导致垃圾收集器的调用方式超出必要的范围.

遵循此规则,您可以更改代码

class App extends React.Component {
  constructor(props) {
    super(props);

    this.onChange = {
      name1: this.handleChange.bind(this, 'name1'),
      name2: this.handleChange.bind(this, 'name2'),
    }

    this.state = {
      name1: '',
      name2: ''
    };
  };

  handleChange(name, event) {
    this.setState({ [name]: event.target.value });
  };


  render() {
    return (
      <div class="row column">
        <Label name={this.state.name1}/>
        <Input onChange={ this.onChange.name1 } />
        <Label name={this.state.name2}/>
        <Input onChange={ this.onChange.name2 } />
      </div>
    );
  };
}

Example