如何處理在React中設置狀態的onChange事件？

Question

我正在學習React，並在下面的代碼中獲得...cannot update during an existing state transition...。在解決它的同時，我在SO中讀到setState不應該在render（）中使用，因爲它會反覆調用render（），導致無限循環。但我不知道如何解決它。

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

你應該傳遞給onChange參考作用，但不能把它，在你的榜樣，你在呼喚handleChecked（因爲功能後()）和結果傳遞給onChange然而，導致這種情況下會undefined如此onChange看起來像onChange={ undefined }。在初始渲染過程中，您也無法設置狀態，但您正在嘗試使用this.handleChecked()，其中包含this.setState。

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