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