如何在React中为映射数组的被点击按钮添加特定样式

你之前样式全局生效的核心原因是做className条件判断时，没有将判断条件和当前遍历的待办项id进行绑定，导致只要有激活项就给所有按钮添加了样式。具体实现步骤如下：

1. 组件内声明激活状态存储 #

首先在Todos组件内定义state，用来存储当前被点击的待办项id，初始值设为null表示无激活项：

import { useState } from 'react'

export const Todos = (props) => {
  // 存储当前激活的待办项id
  const [activeTodoId, setActiveTodoId] = useState(null)
  // 其他逻辑...
}

2. 遍历渲染时动态绑定className #

在map遍历每个待办项时，判断当前项的id是否和激活id一致，一致就追加激活样式类：

注意：map遍历必须给外层元素添加唯一key属性，否则React会抛出渲染警告，同时不要在循环中使用重复的id属性，不符合HTML规范，建议改为class。

修改后的渲染逻辑：

export const Todos = (props) => {
  const [activeTodoId, setActiveTodoId] = useState(null)

  return props.allTodos.map((prev) => {
    // 跳过空项，避免运行报错
    if(!prev.id) return null
    return (
      <div className="item_container" key={prev.id}>
        <button 
          type='button' 
          // 动态拼接类名，匹配到激活id就加active类
          className = {`check_button ${activeTodoId === prev.id ? 'active' : ''}`}
          onClick = {() => setActiveTodoId(prev.id)}
        >
          <img src={check} alt="" className="check_img" />
        </button>
        <li className="li_item">{prev.name}</li>
      </div>
    )
  })
}

3. 添加激活样式的CSS #

在对应的样式文件中添加激活状态的背景样式即可：

.check_button.active {
  /* 自定义你需要的背景样式 */
  background: #2385bb;
  border: none;
}

可选扩展 #

如果需要实现点击第二次取消激活的效果，修改点击事件逻辑即可：

onClick={() => setActiveTodoId(activeTodoId === prev.id ? null : prev.id)}

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