React Todo应用异常：点击复选框仅需触发对应元素handleCheck()

问题分析 #

你当前的核心问题是用了全局单一的isChecked状态，所有todo项的样式都依赖这个状态值，所以点击任何一个复选框，所有div都会同步变化。要实现单个todo项独立控制，必须给每个项维护专属的选中状态，下面是两种可行的修改方案：

方案一：给每个Todo对象绑定选中状态 #

这种方式直接把选中状态嵌入todo数据结构，逻辑更直观：

1. 初始化数据时为每个todo添加checked属性：

const todoData = [
    {id:0,todoname:"Study",todotoday:"Completing CSS today", checked: false},
    {id:1,todoname:"Coding",todotoday:"Leetcode 2 Problems", checked: false}
];

2. 修改handleCheck函数，仅更新对应id的todo项状态：

const handleCheck = (id) => {
    setmyArray(prevArray => {
        return prevArray.map(todo => {
            if (todo.id === id) {
                // 切换当前todo的选中状态
                return {...todo, checked: !todo.checked};
            }
            return todo;
        });
    });
}

3. 渲染时使用当前todo的checked属性控制样式：

<div className="todobox" key={obj.id} style={{opacity: obj.checked ? 0 : ''}}>

方案二：用独立状态记录选中的Todo ID #

如果不想修改原始todo数据结构，可以用单独状态存储所有选中的id：

1. 初始化选中状态集合：

// 用Set存储选中id，方便快速添加/移除操作
const [checkedIds, setCheckedIds] = useState(new Set());

2. 更新handleCheck函数：

const handleCheck = (id) => {
    setCheckedIds(prev => {
        const newSet = new Set(prev);
        newSet.has(id) ? newSet.delete(id) : newSet.add(id);
        return newSet;
    });
}

3. 渲染时判断当前id是否在选中集合内：

<div className="todobox" key={obj.id} style={{opacity: checkedIds.has(obj.id) ? 0 : ''}}>

两种方案都能实现“点击单个复选框仅控制对应div”的需求：如果需要将选中状态与todo数据长期绑定，选方案一；如果只是临时控制样式，方案二更灵活。

内容的提问来源于stack exchange，提问作者Akash Kr. Das