ReactJS - Button onClick wird während des Renderns aufgerufen

Question

Ich habe ein Formular mit type="range". Jetzt möchte ich 3 Schaltflächen hinzufügen, die den gleichen Wert wie das Formular ändern. Aus irgendeinem Grund scheint die Schaltfläche onClick-Ereignis beim Aufruf der Render-Funktion wiederholt aufgerufen zu werden.

Dies ist meine Komponente:

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

Und das ist von der übergeordneten Komponente:

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

Von der übergeordneten Komponente machen:

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

Dies ist der Fehler, dass ich erhalten:

Warnung: setState (...): Kann nicht während eines vorhandenen Zustands Transition (wie innerhalb render oder Konstruktor einer anderen Komponente) aktualisiert werden. Render-Methoden sollten eine reine Funktion von Requisiten und State sein; Konstruktor-Nebenwirkungen sind ein Anti-Pattern, können aber verschoben werden zu componentWillMount.

Für mich sieht das so aus, als ob die Buttons onClick aufgerufen werden, während die Komponente noch rendert. Was mache ich falsch?

Answer 1

Das liegt daran, dass Sie die Funktion nicht direkt an das Ereignis onClick übergeben, sondern die Funktion direkt aufrufen.

Versuchen Sie es auf diese Weise tun:

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

hier die Antwort gefunden: React onClick function fires on render

Hoffe, es hilft!

Answer 2

Wenn Sie Anon-Funktionen aus irgendeinem Grund nicht verwenden möchten, ist die zweite Methode, bind direkt bei der Renderfunktion zu verwenden. Dann können Sie Linien an Ihrem Konstruktor löschen :)

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