Reactjs 这是使用更改处理程序的更好方法答案

【问题标题】：Reactjs which is the better way to use change handlerReactjs 这是使用更改处理程序的更好方法
【发布时间】：2018-08-04 07:32:57
【问题描述】：

所以我知道有几种方法可以做到这一点，但我想知道创建搜索栏组件的更好或更合适的方法是什么？你能解释一下为什么吗？我是新来的反应，看过教程，没有什么，每个人都在改变处理程序有点不同。

state = {
 term: '',
};

onChange = this.onChange.bind(this);

onChange(e) {
 console.log(e.target.value);
 this.setState({ term: e.target.value });
};

<input
 value={this.state.term}
 onChange={this.onChange}
/>

我觉得这种方式可能会更好，因为它允许您针对几种不同的状态重用 onChange 处理程序。

state = {
 term: '',
};

onChange = name => e => {
 this.setState({ [name]: e.target.value });
};

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

【问题讨论】：

你必须定义 better 以获得好的答案。 IMO 将higher-order function 绑定到名为onChange 的属性是不常见的（这表明一个事件侦听器）。不过，onChange(key, event) { this.setState(_ => ({ [key]: e.target.value})); } 之类的东西似乎很简单。

标签： reactjs onchange

【解决方案1】：

为了重用onChange处理程序，下面的代码也会更合适更好。

onChange = e => {
 this.setState({ 
    [e.target.name]: e.target.value 
 });
};

<input type="text" name="name" onChange={(e)=>this.onChange(e)} />

【讨论】：