React组件中的绑定事件处理程序在渲染时触发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创建一个匿名函数，您可以在其中调用您的方法。这样，你的this.selectMode方法只在点击事件发生时被调用:

<.. onClick={() => this.selectMode('commits')}..../> 

如果你不想在每次呈现组件时都创建匿名函数，你可以将一个值存储到元素的属性中。像这样:

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