时间戳

首页 > 解决方案 > 在 react.js 中单击后如何使 div 的颜色永久更改

css - 在 react.js 中单击后如何使 div 的颜色永久更改

问题描述

这是我拥有的网格

单击正方形后，颜色将变为红色。- 这是使用活动类完成的

我希望在单击正方形后对 div 标记的背景颜色的更改保持永久不变。

代码

Board.js

          {board.map((row, rowIdx) => (
            <div key={rowIdx} className="row">
              {row.map((cell, cellIdx) => (
                <div key={cellIdx} className="cell"></div>
               ))}
            </div>
              ))}

Board.css

.row {
  height: 30px;
  margin: 10px;
  transition: transform 0.1s;
}

.cell:hover {
  transform: scale(1.4);
}

.cell {
  width: 30px;
  height: 30px;
  outline: 1px solid rgb(134, 154, 189);
  display: inline-block;
  background-color: seagreen;
  margin: 5px;
  transition: transform 0.2s;

}

.row :active {
  background-color: red;
}

.cell :active {              // Does not do anything
  background-color: blue;
}

标签： cssreactjs

解决方案

单击另一个方块后，先前单击的方块不会保持活动状态，您可以通过添加具有所需样式的另一个类并使用状态来跟踪已单击的方块来做到这一点。

const [boardIndeces, setBoardIndeces] = useState(initArray(board));

const initArray = arr => {
  let rows = [];
  for (let i = 0; i < arr.length; i++) {
    let row = [];
    const currBoard = arr[i];
    for (let z = 0; z < currBoard.length; z++) {
      row[z] = false;
    }
    rows[i] = row;
  }
  return rows;
};

const onCellClick = (rowIdx, cellIdx) => {
  if (!(boardIndeces[rowIdx] && boardIndeces[rowIdx][cellIdx])) {
    boardIndeces[rowIdx][cellIdx] = true;
    setBoardIndeces([...boardIndeces]);
  }
};

{
  board.map((row, rowIdx) => (
    <div key={rowIdx}>
      {row.map((cell, cellIdx) => (
        <div
          key={cellIdx}
          className={
            boardIndeces[rowIdx].includes(cellIdx)
              ? 'your_active_class'
              : 'your_inactive_class'
          }
          onClick={() => onCellClick(rowIdx, cellIdx)}
        ></div>
      ))}
    </div>
  ));
}

推荐阅读