onClick-Handler wird auf jedem Render ausgelöst Zyklus

Question

I Default-Zustand haben wie diese

this.state = { 
    selectedTab : 'tab1' 
} 

dann

Methode machen Mein wie diese

render(){ 
    const { selectedTab } = this.state; 
    return(
     <li>tab1</li><li>tab2</li> 
     <div id="content"> 
     {selectedTab == 'tab1' ? this.renderTab1Content() : this.renderTab2Content()} 
     </div> 
    ) 
} 

Alles oben gearbeitet. Aber ich habe es nicht geschafft, Switch-Tab mit Klick-Ereignis zu implementieren.

Ich habe versucht, Onclick-Ereignis auf meinem li zu binden, um den Status von selectedTab zu ändern, aber ich habe Unendlichkeitsschleife Fehler. So

<li onClick={this.setState({selectedTab :'tab1'})}>Tab 1</li> 
<li onClick={this.setState({selectedTab :'someothertab'})}>Tab 2/li> 

Warum?

Answer 1

Dieser Fehler tritt auf, weil Sie onClick Handler eine Funktion erwartet, aber Sie haben genannt Eine Anweisung zum Setzen vonState für das Ereignis und daher jedes Mal, wenn Sie Änderungen mit setState angeben, wird der Rendervorgang erneut aufgerufen, und daher ruft onClick erneut dieauf, die eine Endlosschleife auslöst. Sie können dies tun, indem sie ein arrow function in onClick Ereignis verwenden oder eine separate Funktion

<li onClick={() => this.setState({selectedTab :'tab1'})}>Tab 1</li> 

oder

handleClick =() =>{ 
    this.setState({selectedTab :'tab1'}) 
} 


<li onClick={this.handleClick}>Tab 1</li> 

Answer 2

Jedes Mal, wenn Ihre li gerendert wird, wird der setState automatisch aufgerufen und Sie kommen in eine Schleife. Du solltest so etwas tun.

Erstellen Sie eine Methode in der Komponente wie diese

setActiveTab = (tab) => { 
this.setState({selectedTab : tab}); 
} 

Dann in Ihrem Render-Methode umschreiben Ihre li wie diese

<li onClick={() => this.setActiveTab('tab1')}>Tab 1</li> 
<li onClick={() => this.setActiveTab('someothertab')}>Tab 2/li> 

Answer 3

Aufruf werde ich Konzept der vorstellen „Funktionen höherer Ordnung hier“.

Grundlegend Funktion höherer Ordnung ist Funktion, die eine andere Funktion zurückbringt.

Ändern wir onClick Handler und machen es "Funktion höherer Ordnung".

// Original function 
setActiveTab = (activeTab) => { 
    this.setState({ activeTab }); 
} 

// Higher order function 
setActiveTab = (activeTab) => { 
    // Here, we already "remember" name of tab which becomes active after click. 
    // Return "true" `onClick` handler from this place. 
    return() => { 
    // Finaly set state after click. 
    this.setState({ activeTab }); 
    } 
} 

Wie sieht die Renderfunktion aus?

<li onClick={this.setActiveTab('tab1')}>Tab 1</li> 
<li onClick={this.setActiveTab('someothertab')}>Tab 2/li> 

Besser, nicht wahr?