JSX onClickは評価を続けますが、InternalError：再帰が多すぎます

Question

私はReactを新しくしました。誰でも問題が何であるか私に説明することができますか？ onClick関数は両方のボタンから発火し続けて無限の再帰をもたらすようです。ありがとう！

export class MyButtons extends React.Component { 
    constructor(props) { 
     super(props); 

     this.state = { selectedIndex: 0 }; 

     this.handleClick = this.handleClick.bind(this); 
    } 

    handleClick(newIndex) { 
     this.setState({ 
      selectedIndex: newIndex 
     }); 
    } 

    render() { 
     return (
      <div> 
       <button onClick={this.handleClick(0)} >Button 0</button> 
       <button onClick={this.handleClick(1)} >Button 1</button> 
       <span>{this.state.selectedIndex}</span> 
      </div> 
     ); 
    } 
} 

Answer 1

参照：関数を呼び出すため

this.handleClick(0)は、クリックせずに、レンダリングして起動します。

その後setStateコール新しい再び​​をレンダリングして呼び出す

onClick={() => this.handleClick(1)}がお手伝いします。

Answer 2

あなたはA（その他のソリューションはまた

handleClick(newIndex) { 
    return() => this.setState({ 
     selectedIndex: newIndex 
    }); 
} 

render() { 
    return (
     <div> 
      <button onClick={this.handleClick(0)} >Button 0</button> 
      <button onClick={this.handleClick(1)} >Button 1</button> 
      <span>{this.state.selectedIndex}</span> 
     </div> 
    ); 
} 

機能を返すようにします​​作ることであろう

 <div> 
      <button onClick={() => this.handleClick(0)} >Button 0</button> 
      <button onClick={() => this.handleClick(1)} >Button 1</button> 
      <span>{this.state.selectedIndex}</span> 
     </div> 

それを呼び出すことがない機能を渡すを必要としますそれぞれのレンダーコールで新しい関数を作成することはないので、より多くのperformatアプローチがあります）ボタン自体にEP値（はい、はい<button> has value）

handleClick(event) { 
    this.setState({ 
     selectedIndex: +event.target.value 
    }); 
} 

render() { 
    return (
     <div> 
      <button value="0" onClick={this.handleClick} >Button 0</button> 
      <button value="1" onClick={this.handleClick} >Button 1</button> 
      <span>{this.state.selectedIndex}</span> 
     </div> 
    ); 
} 

Answer 3

<button onClick={() => this.handleClick(0)}>Button 0</button>