语法：React中的handleChange（）函数用于不同的状态属性

Question

这是一个handleChange函数，它接收将与之关联的状态元素的名称。

有人可以向我解释为什么必须这样写吗：

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

并且不能这样写：

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

我似乎不明白如何概念化第一个实际上的作用。

Answer 1

第一个返回一个函数，因此调用它的结果将用作onChange处理程序：

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

第二个是一个常规类方法，该方法带有一个属性字符串和一个事件，您可以从onChange处理程序中传递该事件：

<input onChange={(e) => this.handleInputChange('someProperty', e)} value={someProperty} />

Answer 2

我认为更好的方法是将输入的name设置为状态键。它应该易于处理更改。 codeandbox上的代码示例：handleReactInputsChange