React Components中的绑定事件处理程序在呈现时触发onClick
问题描述:
我正在学习React。在我编写的测试应用程序中,我使用onClick方法呈现了一些按钮。当它们像这样呈现时,它们工作并按照预期的方式调用selectMode函数。React Components中的绑定事件处理程序在呈现时触发onClick
constructor(props) {
super(props);
this.state = { mode: 'commits', commits: [], forks: [], pulls: [] };
}
...
selectMode(mode) {
this.setState({ mode });
}
render() {
...
return (<div>
<button onClick={this.selectMode.bind(this, 'commits')}>Show Commits</button><br/>
<button onClick={this.selectMode.bind(this, 'forks')}>Show Forks</button><br/>
<button onClick={this.selectMode.bind(this, 'pulls')}>Show Pulls</button>
</div>
)
}
但是,当我尝试下面的方法所示,通过在构造函数中结合所建议的最佳实践,在selectMode功能组件时渲染所谓的三倍。为什么onClick事件处理程序被调用呢?我有什么错误?
constructor(props) {
super(props);
this.state = { mode: 'commits', commits: [], forks: [], pulls: [] };
this.selectMode = this.selectMode.bind(this)
}
...
selectMode(mode) {
this.setState({ mode });
}
render() {
...
return (<div>
<button onClick={this.selectMode('commits')}>Show Commits</button><br/>
<button onClick={this.selectMode('forks')}>Show Forks</button><br/>
<button onClick={this.selectMode('pulls')}>Show Pulls</button>
</div>
)
}
答
您this.selectMode(...)
是立即执行,只要你的组件呈现。
<.. onClick={this.selectMode('commits')}..../> <-- function is called immediately
您可以使用arrow function
来创建一个匿名函数中,你可以打电话给你的方法。
<.. onClick={() => this.selectMode('commits')}..../>
如果您不希望创建匿名函数每次您呈现组件,您可以将值存储到元素的属性:通过这种方式,你this.selectMode
方法只能得到当点击事件发生时调用。像这样:
constructor(props) {
super(props);
this.state = { mode: 'commits', commits: [], forks: [], pulls: [] };
this.selectMode = this.selectMode.bind(this)
}
selectMode(event){
this.setState({mode: e.target.name});
}
render(){
....
<.. onClick={this.selectMode} name='commits' ..../>
..}
答
我不确定,但我认为这是因为您通过添加括号来调用每个onClick函数。如果您使用ES6你可以尝试这样做:
onClick =() => { this.selectMode('commits') }
onClick =() => { this.selectMode('forks') }
onClick =() => { this.selectMode('pulls') }
+1
是,箭头功能有额外的封闭括号工作,如下所示: {this.selectMode( '提交')}}>显示提交。这是在反应文档中介绍的。但我试图不使用箭头功能。我的方式也在React文档中(但从未显示传递参数)。 – MartinDuo
使用元素的属性是传递这些参数的好方法。我太新了,没有想到这一点,也没有看到覆盖传递参数的例子。 – MartinDuo