javascript – React.js事件需要2次点击才能执行

前端之家收集整理的这篇文章主要介绍了javascript – React.js事件需要2次点击才能执行前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我正在通过React.js构建生命游戏,我陷入了一种不舒服的境地:
我设置为onClick = {event}的每个事件都需要2次点击才能执行.

让我来描述一下:
正如您在下面的代码中看到的,我有2个按钮(一个按钮是将电路板的大小更改为10 x 10,另一个是更改间隔的速度).

一切都很好,除了当我点击这两个按钮时,我需要双击才能执行.在第一次点击时,使用Chrome中的React Developer Tool,我可以看到状态包括宽度,高度,速度都会改变,但状态板仍然保持不变.只有在第二次单击后,才会更改电路板状态.

任何人都可以解释原因,并告诉我如何解决?谢谢

这是我的代码的一部分

var GameBoard = React.createClass({
    getInitialState: function() {
        return {
             width: 10,height: 10,board: [],speed: 1000,};
    },// clear the board to the initial state
    clear: function(width,height) {
        this.setState({
            width: width,height: height,});
        this.setSize();
        clearInterval(this.game);
    },// set the size of the board
     setSize: function() {
        var board = [];
        for (var i = 0; i < this.state.height; ++i) {
            var line = [];
            for (var j = 0; j < this.state.width; ++j)
                line.push(0);
            board.push(line);
        }
        this.setState({
            board: board
        });
    },// start the game
    start: function() {
        this.game = setInterval(this.gameOfLife,this.state.speed);
    },gameOfLife: function() { // game of life },// change the speed of the game
    changeSpeed: function(speed) {
        this.setState({ speed: speed });
        clearInterval(this.game);
        this.start();
    },// change the size to 10 x 10
    smallSize: function() {
        this.clear(10,10);
    },render: function() {
        return (
            <div className="game-board">
                <h1>Conway's Game of Life</h1>
                <h2>Generation: { this.state.generation }</h2>
                <div className="control">
                    <button className="btn btn-default" onClick={ this.start }>Start</button>

                </div>

                <Environment board={ this.state.board } onChangeSquare = { this.onChangeSquare }/>

                <div className="size">
                    <h2>Size</h2>
                    <button className="btn btn-default" onClick={ this.smallSize }>Small (10 x 10)</button>
                </div>

                <div className="speed">
                    <h2>Speed</h2>
                    <button className="btn btn-default" onClick={ this.changeSpeed.bind(this,900) }>Slow</button>
                </div>
            </div>
        )
    }
});

解决方法

原因是组件的状态不会立即改变.

在clear()方法中,您可以设置宽度和高度状态.但在内部,当他们对setSize()方法做出反应时,它们不会立即更新.它们仅在到达render方法时才会更新.

当您第二次单击该按钮时,状态将被正确更新.这就是它在第二个实例中工作的原因.

一个解决方案请不要保持宽度和高度状态在道具中使用它.将10 * 10保留为separete默认支柱并在setSize方法中使用它.

猜你在找的JavaScript相关文章