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

2024-04-26

所以我知道有几种方法可以做到这一点,但我想知道哪种方法是更好或更合适的方法来创建搜索栏组件?您能解释一下原因吗?我是新手,看过教程,但每个人对处理程序的更改都略有不同。

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

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

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

<input type="text" name="name" onChange={(e)=>this.onChange(e)} />
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Reactjs 这是使用更改处理程序的更好方法 的相关文章

随机推荐