Question

我正在着手学习一些反应，我正在尝试创建一个可点击按钮的网格。现在我想要的只是在点击按钮后更改按钮的颜色。

从这个React Tutorial开始，我编写了我的组件，通过循环创建一个可变大小的网格。我在grid组件中添加了一个handleClick方法来更改单击按钮的颜色。当我点击按钮时，整个列会改变颜色。

从调试器看来，它似乎将indeces（i和j）的正确值传递给handleClick方法，所以我不知道为什么会发生这种情况。

我的组件的代码如下：

var height = 3;
var width = 5;

class Cell extends React.Component {
    render() {
      return (
        <button 
        className={ this.props.value === 'ON' ? "cell cellOn" : "cell 
                    cellOff" }
        onClick={() => this.props.onClick()}>
        </button>
      );
    }
  }

export class Grid extends Component  {
    constructor(props) {
        super(props);
        this.state = {
          cells: Array(height).fill(Array(width).fill(null)),
        };
    }

    handleClick(i, j) {
        const cells = this.state.cells.slice();
        cells[i][j] = ( cells[i][j] === 'ON' ) ? 'OFF' : 'ON' ;
        this.setState({cells: cells});
    }


    renderCell(i, j) {     
        return(
        <Cell value={this.state.cells[i][j]} 
        onClick={() => this.handleClick(i, j)} />
        );
    }

    renderCellRow(i, w) {
        return(
        <div>
            {Array.from(Array(w), (_,x) => x).map((j) => this.renderCell(i, j)) }
        </div>
        );
    }

    render() {
        const status = 'Next player: X';

        return (
            <div>
            <div className="status">{status}</div>
            <div>
              {Array.from(Array(height), (_,x) => x).map((i) => this.renderCellRow(i, width)) }
            </div>

            </div>
        );
    }
}

有人可以提供一些建议吗？是因为我曾经在高度和宽度上循环的 map 调用？提前谢谢！

Answer 1

问题在于你的状态初始化：

Array(height).fill(Array(width).fill(null))

我建议避免使用fill。它通过引用向对象填充对象。因此，当您更改其中一个时，您将获得其他更新。

以下是具有工作版https://codepen.io/krasimir/pen/YYdLQL?editors=0010

的codepen

为什么我的组件中的handleClick方法似乎循环？

1 个答案: