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

【问题标题】：How to make the color of a div change permanently after it has been clicked in react.js在 react.js 中单击后如何使 div 的颜色永久更改
【发布时间】：2021-04-05 07:20:32
【问题描述】：

This is the grid that I have

Once a square has been clicked, the color changes to red. - 这是使用活动类完成的

我希望 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;
}

【问题讨论】：

尝试添加状态，检查 React 文档中的 style 属性

标签： css reactjs

【解决方案1】：

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

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>
  ));
}

【讨论】：

谢谢！您的解决方案解决了一个小问题。单击一个正方形后，整行的颜色会发生变化，而不仅仅是被单击的正方形的颜色。这就是我在 CSS 中设置类的方式： .your_active_class .cell { background-color: orchid; } .your_inactive_class .cell { 背景颜色：海绿色； }
看来你需要一个多维数组，我修改了我的答案，你可以尝试反馈一下吗？
我尝试了您的解决方案，但有一个错误我无法解决。我已经创建了您的第二种方法的实时构建。您可以找到实时构建和错误消息here。我对您的初始方法进行了一些更改。我为单元格添加了一个状态变量（ifClicked）。当 BoardIndices[rowIdx] 和 ifClicked 为真时，我将类从“单元格”更改为“新单元格”，区别在于 bg-color，但即使在这里，所有方块都会改变颜色。这种方法的构建是：ticket-main-branch.netlify.app
感谢您抽出宝贵时间查看此内容。侧构建代码为here，主构建代码为here
@VishwanathEzhil 因为我们改变了我们需要改变检查的实现，所以我们使用boardIndeces[rowIdx].includes(cellIdx) ? 'your_active_class' : 'your_inactive_class' }而不是boardIndeces[rowIdx][cellIdx] ? 'your_active_class' : 'your_inactive_class' }

【解决方案2】：

如果不想使用 React，可以使用复选框

HTML

<input type="checkbox" id="color" name="color">
<label id="color-div" for="color">
    <!-- the div you want to change color -->
</label>

CSS

#color {
    display: none
}

#color:checked + #color-div { /* + in CSS is the sibling combinator */
   background-color: #fffff /* your background color */
}

你基本上做的是制作一个不可见的复选框并用标签切换它，当它被切换时你对 CSS 进行更改请记住，CSS 组合器仅在其应用到的 HTML 元素之后的元素中起作用

【讨论】：