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

Question

这是我有的网格

一旦点击一个正方形，颜色就会变为红色。-这是使用活动类完成的

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

Answer 1

单击另一个方块后，上一次单击的方块将不会保持活动状态，您可以通过添加具有所需样式的另一个类来完成此操作，并使用state跟踪已单击的方块。

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

Answer 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元素之后的元素中工作，它被应用到