如何在TypeScript中通过onClick事件修改div的背景颜色？

要实现点击单个由map生成的div时仅该div背景变蓝，你需要跟踪当前选中项的唯一标识，而不是直接存颜色值（否则所有div会同时变色），具体步骤如下：

1. 添加选中项状态
   在组件中定义状态，用来存储当前被点击项的唯一标识（比如item的id，如果数据里没有，也可以用value2，前提是它的值唯一）：

   const [selectedItemKey, setSelectedItemKey] = useState(null);
   

2. 修改点击事件
   让点击事件接收当前item的标识作为参数，更新选中状态：

   const handleClick = (key) => {
     // 如果点击的是已选中的项，可以选择取消选中，或者保持选中
     setSelectedItemKey(key === selectedItemKey ? null : key);
   };
   

3. 动态绑定className
   在渲染div时，判断当前项是否为选中项，动态添加蓝色背景的类：

   {data1.map((item) => (
     <div 
       key={item.id || item.value2} // 必须加唯一key，React列表渲染要求
       className={`hover:bg-[#B2BABB] cursor-pointer w-full ${selectedItemKey === (item.id || item.value2) ? 'bg-[#0000FF]' : ''}`}
       onClick={() => handleClick(item.id || item.value2)}
     >
       <Flex direction="col" className="pl-12">
         <p className="text-xl text-primary font-medium pl-4">
           {item.value2}
         </p>
       </Flex>
     </div>
   ))}
   

补充说明 #

• 如果你的项目用Tailwind CSS，也可以直接用预设类bg-blue-500替换自定义的bg-[#0000FF]。
• 必须给map生成的每个div加唯一key，这是React列表渲染的强制要求，避免渲染异常。
• 如果需要支持多选，可以把selectedItemKey改成数组，点击时添加/移除对应标识。

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