Question

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

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')}
/>

Answer 1

为了重用onChange处理程序，下面的代码也将更加合适和完善。

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

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

ReactJS是使用变更处理程序的更好方法

1 个答案: