javascript - 使用单个 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 知道正在编辑的输入字段并做出相应的 react ？

Answer 1

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

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

你会这样使用:

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