在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'))

- Riina

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

示例

---

感谢 @Alik 提到了 eslint 规则 jsx-no-bind，

在 JSX 属性中使用 bind 调用或箭头函数将会在每次渲染时创建一个全新的函数。这对性能不利，因为它会导致垃圾回收器被过度调用。

遵循该规则，您可以像下面这样更改代码：

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

示例

- Oleksandr T.