Binden von Ereignishandlern in React Components feuert onClick wenn gerendert wird

Question

Ich lerne React. In einer Test-App, die ich schreibe, rende ich einige Buttons mit onClick-Methoden. Wenn sie so gerendert werden, funktionieren sie und rufen die selectMode-Funktion wie erwartet auf, wenn sie geklickt werden.

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

Aber wenn ich die vorgeschlagenen Best Practices versucht Art und Weise unten, indem sie in den Konstruktor zu binden, wird die Funktion select dreimal aufgerufen, wenn die Komponente wiedergegeben wird. Warum werden die onClick-Ereignishandler dann aufgerufen? Was habe ich falsch?

Answer 1

Ihre this.selectMode(...) ausgeführt wird sofort, wenn Ihre Komponente gerendert wird.

<.. onClick={this.selectMode('commits')}..../> <-- function is called immediately 

Sie können arrow function verwenden eine anonyme Funktion zu erstellen, in dem Sie Ihre Methode aufrufen können. Auf diese Weise Sie this.selectMode Methode nur aufgerufen werden, wenn das Click-Ereignis eintritt:

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

Wenn Sie jedes Mal nicht anonyme Funktionen erstellen möchten Sie die Komponente machen, erhalten Sie einen Wert zu einem Attribut des Elements speichern . Wie folgt aus:

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

Ich bin mir nicht sicher, aber ich denke es liegt daran, dass Sie jede onClick-Funktion aufrufen, indem Sie die Klammern hinzufügen. Wenn Sie ES6 verwenden könnten Sie versuchen, dies zu tun:

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