语法 : handleChange() 函数在 React 中用于不同的状态属性

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设置为状态键。 处理更改应该很容易。 代码沙盒上的代码示例： 句柄反应输入更改