Wie behandelt man das onChange-Ereignis, das den Status in React setzt?

Question

Ich lerne React und im folgenden Code bekomme ich ...cannot update during an existing state transition.... Während ich suche, es zu beheben, habe ich in SO gelesen, dass setState nicht innerhalb von render() verwendet werden sollte, da es wiederholt rendern() aufruft, was zu einer Endlosschleife führt. Aber ich weiß nicht, wie ich es beheben kann.

import React from 'react'; 
import ReactDOM from 'react-dom'; 

export default class CheckBox extends React.Component{ 
    constructor() { 
     super(); 
     this.state = {isChecked: false}; 
    } 
    handleChecked() { 
     this.setState({isChecked: !this.state.isChecked}); 
    } 
    render(){ 
     var txt; 
     if (this.state.isChecked) { 
      txt = 'checked' 
     } else { 
      txt = 'unchecked' 
     } 
     return(
      <div> 
      <input type="checkbox" onChange={this.handleChecked()}/> 
      <p>This box is {txt}</p> 
      </div> 
     ); 
    } 
} 

ReactDOM.render(<CheckBox/>, document.getElementById('hello')); 

Answer 1

Sie auf onChange Verweis übergeben sollten funktionieren, aber nicht nennen. Sie in Ihrem Beispiel fordern handleChecked und Ergebnis passieren zu onChange jedoch führt in diesem Fall (weil es () nach Funktion) undefined wird so onChange sieht wie onChange={ undefined } aus. Außerdem können Sie den Zustand während des anfänglichen Renderns nicht festlegen, aber Sie versuchen, es mit this.handleChecked() zu tun, das this.setState enthält.

export default class CheckBox extends React.Component{ 
    constructor() { 
    super(); 
    this.state = {isChecked: false}; 

    // set this (with .bind), 
    // because you need get methods from CheckBox, like .setState 
    this.handleChecked = this.handleChecked.bind(this); 
    } 

    handleChecked() { 
    this.setState({isChecked: !this.state.isChecked}); 
    } 

    render(){ 
    var txt; 
    if (this.state.isChecked) { 
     txt = 'checked' 
    } else { 
     txt = 'unchecked' 
    } 

    // remove() after handleChecked because you need pass 
    // reference to function 
    // also add return statement before <div> 
    return <div> 
     <input type="checkbox" onChange={ this.handleChecked }/> 
     <p>This box is {txt}</p> 
    </div> 
    } 
} 

Example