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機能は3回呼び出されます。なぜ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') }