React - 如何将点击事件分别分配给循环中生成的一堆 div

Question

我正在尝试在 React 中创建自己的生命游戏。目前已经创建了一个带有div的地图，将来当我完成项目时，这些地图将是单独的单元格。我还想将单击事件附加到每个单元格，但由于某种原因，当我单击单个单元格时，整个单元格集都会受到影响。你能检查一下为什么会这样吗？另外，你能告诉我我的方法是否正确吗？这是我的索引.js代码：

class Board extends React.Component {
  constructor(props){
    super(props);
    this.state = {isToggleOn: true};
    this.changeState = this.changeState.bind(this);
  }
  changeState() {
    this.setState(prevState => ({
     isToggleOn: !prevState.isToggleOn
   }));
  }
  createMap = (cols, total) => {
    let table = []; let nL = ''; let idRow = 0; let idCol = 0;
    for (let i = 0; i < total; i++) {
      idCol++;
      if (i%cols === 0){
        nL = 'newLine';
        console.log(i%cols);
        idRow += 1;
        idCol = 0;
      }
      else {
        nL = '';
      }
      let toggledBackground = (this.state.isToggleOn ? 'test' : '');
      table.push(<div id={"row-"+idRow+"-"+idCol} className={nL+" square "+toggledBackground} onClick={this.changeState}></div>);
    }
    return table;
  }
  render() {
    return(
      <div>
        {this.createMap(COLS, FIELDS)}
      </div>
    );
  }
}

Answer 1

所有这些都被突出显示，因为它们都共享相同的状态，最简单的解决方案是为正方形制作一个单独的组件并将所需的数据作为道具传递。

这将允许您为每个单元格设置单独的状态。

Answer 2

我假设FIELDS是单元格的总数(例如，对于 10x10 的板，这将使 FIELDS = 100(。如果是这种情况，则可以将每次迭代的当前索引绑定到要推送的所述单元格。

这样，您就会知道单击了哪个单元格。

onClick={() => this.changeState(i)}

您还需要向实际的函数声明添加一个参数，并保存该特定单元格的状态：

changeState(index) {
  this.setState(prevState => {
    let arr = prevState.cellStates.slice();
    arr[index] = !arr[index];
    return {cellStates: arr};
  });
}

当然，这需要你有一个数组，而不是一个布尔值：

this.state = {cellStates: Array(FIELDS).fill(false)};

最后是你的风格：

let toggledBackground = (this.state.cellStates[i] ? 'test' : '');