Question

Iam尝试使用react.j来实现conway的生命游戏。为此，我使用了由细胞组成的板，在用户点击时在黑色和粉红色之间切换，状态变量BoardState用于跟踪变化。所有单元格响应点击事件调用功能：handleClick改变状态和背景颜色，当状态改变时，背景颜色保持不变，除了最后一个单元格，这改变了单元格的颜色

link to codepen！

const Cell = React.createClass({
  getInitialState() {
    return {

      row: 3,
      col: 3
    };
  },
  //handles click event,changes the state of the board
  handleClick(evt) {
    var id = evt.target.id.split(" ");
    var i = parseInt(id[0]);
    var j = parseInt(id[1]);

    var newBoard = this.state.BoardState;

    if (newBoard[i][j] == 0) {
      newBoard[i][j] = 1;
    } else {
      newBoard[i][j] = 0;
    }

    this.setState({
      BoardState: newBoard
    });
  },

  componentWillMount() {
    var board = [];
    for (var i = 0; i < this.state.row; i++) {
      var dummy = [];
      for (var j = 0; j < this.state.col; j++) {
        dummy.push(0);
      }
      board.push(dummy);
    }

    this.setState({
      BoardState: board
    });
  },
  render() {
    var style = {
      height: "11px",
      width: "11px",

      display: "inline-block",
      border: "1px solid #222"
    };
    var Board = [];
    var bState = this.state.BoardState;
    console.log(bState);

    for (var i = 0; i < this.state.row; i++) {
      for (var j = 0; j < this.state.col; j++) {
        //change color of the cell depending upon the state of the cell
        if (bState[i][j] == 0) {
          style.background = "black";
        }
        if (bState[i][j] == 1) {
          style.background = "pink";
        }

        Board.push(
          <div onClick={this.handleClick} style={style} id={i + " " + j} />
        );
      }

      Board.push(<div id="hide">i</div>);
    }
    console.log(Board);

    return (
      <div>
        <div id="board">{Board}</div>
      </div>
    );
  }
});

ReactDOM.render(<Cell />, document.getElementById("app"));

Answer 1

在循环中获取样式声明。您不能为所有单元格使用相同的样式对象。这是一支更新的笔 https://codepen.io/pavanmehta/pen/RLOzdV?editors=0010

  for (var i = 0; i < this.state.row; i++) {
   for (var j = 0; j < this.state.col; j++) {
    var style = {
     height: "11px",
     width: "11px",
     display: "inline-block",
     border: "1px solid #222"
    };

工作演示：

const Cell = React.createClass({
  getInitialState() {
    return {
      row: 3,
      col: 3
    };
  },
  //handles click event,changes the state of the board
  handleClick(evt) {
    var id = evt.target.id.split(" ");
    var i = parseInt(id[0]);
    var j = parseInt(id[1]);

    var newBoard = this.state.BoardState;

    if (newBoard[i][j] == 0) {
      newBoard[i][j] = 1;
    } else {
      newBoard[i][j] = 0;
    }

    this.setState({
      BoardState: newBoard
    });
  },

  componentWillMount() {
    var board = [];
    for (var i = 0; i < this.state.row; i++) {
      var dummy = [];
      for (var j = 0; j < this.state.col; j++) {
        dummy.push(0);
      }
      board.push(dummy);
    }

    this.setState({
      BoardState: board
    });
  },
  
  render() {
    var Board = [];
    var bState = this.state.BoardState;
    console.log(bState);

    for (var i = 0; i < this.state.row; i++) {
      for (var j = 0; j < this.state.col; j++) {
        var style = {
          height: "11px",
          width: "11px",
          display: "inline-block",
          border: "1px solid #222"
        };
        //change color of the cell depending upon the state of the cell
        if (bState[i][j] == 0) {
          style.background = "black";
        } else {
          style.background = "pink";
        }

        Board.push(
          <div onClick={this.handleClick} style={style} id={i + " " + j} />
        );
      }
      Board.push(<div id="hide">i</div>);
    }

    return (
      <div>
        <div id="board">{Board}</div>
      </div>
    );
  }
});

ReactDOM.render(<Cell />, document.getElementById("app"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id='app'></div>

如何在点击时更改反应组件的样式？

1 个答案: