使用单个handleInputChange方法来处理多个输入字段（React）

Question

我有一个表格，在React“

render() {
    return (
      <div>
        <form onSubmit={this.onFormSubmit}>
          <input
            value={this.state.first}
          />

          <input
            value={this.state.second}
          />

          <input
            value={this.state.third}
          />
           //.... many more
        </form>
     //...
)}

我的handleInputChange通常如下所示：

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

现在，由于我有许多不同的输入字段，我通常会做许多不同的handleInputChange方法。 但是，所有这些处理输入更改的事情基本上都是相同的：它们根据当前编辑的输入字段重新设置状态。

我怎么可能，而不是写三个handleInputChange方法，每个方法做的事情如下：

  handleInputChangeFirst(e) {
    this.setState({first: e.target.value });
  }
  handleInputChangeSecond(e) {
    this.setState({second: e.target.value });
  }

...使用一个handleInputChange执行所有这些handleInputChange ，然后检查哪个值需要更新？ 我怎样才能让handleInputChange了解正在编辑的输入字段并做出相应的反应？

Answer 1

你可以有一个通用的handleInputChange方法：

handleInputChange(property) {
  return e => {
    this.setState({
      [property]: e.target.value
    });
  };
}

您可以这样使用：

<input
  value={this.state.first}
  onChange={this.handleInputChange('first')}
/>

Answer 2

如果我错了，请纠正我，但上述方法不会为每个渲染返回一个新函数吗？ 因此，如果您将这些处理程序传递给子组件，那么它们每次都会被视为更新的prop，而不是相同的prop（因为它是每个渲染的新函数），并导致不必要的重新渲染子项。 内联函数的一个原因是在渲染方法中讨厌。

这是我在网上看到的另一个解决方案：

handleInputChange = event => {
  const { name, value } = event.target;
  this.setState({
    [name]: value
  });
}

和输入元素：

<input name="first" value={this.state.first} onChange={this.handleInputChange} />

名称可能不是最好使用的属性，但您明白了