javascript - 使用单个handleInputChange方法处理多个输入字段( react )

我有一个表格，在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方法：

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

您将这样使用：

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

关于javascript - 使用单个handleInputChange方法处理多个输入字段( react )，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/43959116/