如何修改网格中点击元素之前所有元素的背景颜色

我想要实现如下效果：点击编号为20的方块时，其之前的所有方块背景变为浅橙色。希望有人指导我在handleClick函数中添加什么代码。

实现方案 #

你可以通过状态管理结合样式判断来实现需求，具体修改步骤如下：

1. 添加状态变量
   在组件中引入useState并初始化状态，用来记录被点击的方块编号：

import { useState } from 'react';

// 组件内部
const [selectedNum, setSelectedNum] = useState<number | null>(null);

2. 修改handleClick函数
   在点击事件中记录当前点击的方块编号：

const handleClick = (num: number) => {
  setSelectedNum(num);
};

3. 添加样式判断与样式定义
   渲染方块时，判断当前方块编号是否小于等于20，且当前选中的是20号方块，满足条件则添加浅橙色背景样式：

<div
  className={`square 
    ${num === 20 ? 'highlight' : ''} 
    ${selectedNum === 20 && num <= 20 ? 'light-orange' : ''}`}
  onClick={() => handleClick(num)}
>
  {num}
</div>

同时在CSS中定义浅橙色背景样式：

.light-orange {
  background-color: #ffe0b2;
}

这样点击20号方块后，所有编号≤20的方块都会自动变为浅橙色背景。

内容的提问来源于stack exchange，提问作者Ishaan Kanwar