ReactJS - レンダリング中にボタンonClickが呼び出される

Question

私はtype="range"のフォームを持っています。フォームと同じ値を変更する3つのボタンを追加したいと思います。何らかの理由で、ボタンonClickイベントがレンダリング関数の呼び出し時に繰り返し呼び出されるようです。親コンポーネントから

handleSetCountdown(seconds) { 
     this.setState({ 
      count: seconds 
     }); 
    } 

レンダリング：

これは私のコンポーネントである：

class Slider extends Component { 
    constructor(props) { 
     super(props); 

     this.handleChange = this.handleChange.bind(this); 
     this.handleButton = this.handleButton.bind(this); 
    } 

    handleChange() { 
     this.props.onSetCountdown(parseInt(this.refs.seconds.value, 10)); 
    } 

    handleButton(value) { 
     this.props.onSetCountdown(parseInt(value, 10)); 
    } 

    render() { 
     return(
      <div> 
       <form className={styles.ttSlider} ref="form"> 
        <input max="480" min="60" name="slider" onChange={this.handleChange} ref="seconds" type="range" value={this.props.totalSeconds}/> 
        <button onClick={this.handleButton(60)}>1min</button> 
        <button onClick={this.handleButton(180)}>3min</button> 
        <button onClick={this.handleButton(300)}>5min</button> 
       </form> 
      </div> 
     ) 
    } 
} 

Slider.propTypes = { 
    totalSeconds: React.PropTypes.number.isRequired, 
    onSetCountdown: React.PropTypes.func.isRequired 
}; 

そして、これは親コンポーネントからである

<Slider totalSeconds={count} onSetCountdown={this.handleSetCountdown}/> 

これは私のエラーです取得：

警告：SETSTATE（...）：（などrenderまたは別のコンポーネントの コンストラクタ内など）は、既存の状態 遷移中に更新できません。レンダリング方法は、小道具の純粋な機能であり、 状態でなければなりません。コンストラクタの副作用は反パターンですが、 からcomponentWillMountに移動できます。

これは、コンポーネントがまだレンダリングされている間にボタンonClickが呼び出されるようです。私は間違って何をしていますか？

Answer 1

これは、関数onClickに関数を渡すのではなく、関数を直接呼び出すためです。

このようにそれをやってみてください。

<button onClick={() => { this.handleButton(60)}}>1min</button> 
<button onClick={() => { this.handleButton(180)}}>3min</button> 
<button onClick={() => { this.handleButton(300)}}>5min</button> 

はここに答えが見つかりました：React onClick function fires on render

はそれが役に立てば幸い！

Answer 2

あなたが何らかの理由で匿名関数を使用したくない場合は、第二の方法は、レンダリング機能に直接バインドを使用することです。次に、あなたのコンストラクタ:)

<button onClick={this.handleButton.bind(this, 60)}>1min</button> 

[レンダリング上で反応のonClick関数火災]（の