ReactJS - кнопка onClick вызывается во время рендера

Question

У меня есть форма с type="range". Теперь я хотел бы добавить 3 кнопки, которые меняют то же значение, что и форма. По некоторым причинам, кнопки onClick-события, похоже, вызываются повторно при вызове функции рендеринга.

Это мой компонент:

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 
}; 

И это из родительского компонента:

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

От родительского компонента визуализации:

<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>