React Components中的绑定事件处理程序在呈现时触发onClick

Question

我正在学习React。在我编写的测试应用程序中，我使用onClick方法呈现了一些按钮。当它们像这样呈现时，它们工作并按照预期的方式调用selectMode函数。

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

Answer 1

您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' ..../> 
..} 

Answer 2

我不确定，但我认为这是因为您通过添加括号来调用每个onClick函数。如果您使用ES6你可以尝试这样做：

onClick =() => { this.selectMode('commits') } 
onClick =() => { this.selectMode('forks') } 
onClick =() => { this.selectMode('pulls') }