javascript - 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}/>

这是我得到的错误:

Warning: setState(...): Cannot update during an existing state transition (such as within render or another component's constructor). Render methods should be a pure function of props and state; constructor side-effects are an anti-pattern, but can be moved to 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

希望对您有所帮助!