我正在通过React.js构建生命游戏,我陷入了一种不舒服的境地:
我设置为onClick = {event}的每个事件都需要2次点击才能执行.
我设置为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> ) } });