一个Todo App每当我点击check时,它应该只为Div的特定元素(Array Elements)触发handleCheck()
在所有div(Array Elements)中触发handleCheck()。
const todoData = [
{id:0,todoname:"Study",todotoday:"Completing CSS today"},
{id:1,todoname:"Coding",todotoday:"Leetcode 2 Problems"}
];
const [myArray,setmyArray] = useState(todoData);
const [isChecked, setIsChecked] = useState();
const handleCheck = (id) =>{
console.log(id);
setIsChecked(current => !current);
}
return (
<div className="todomain">
{
myArray.map((obj)=>{
return ( <div className="todobox" key={obj.id} style={{opacity:isChecked ? 0 : ''}}>
<div className="checkcont">
<img src={check} alt="Check" className='chkbtn btn' onClick={() => handleCheck(obj.id)}/>
</div>
<h2 className="head" >Todo: {obj.todoname}</h2>
<h3 className="todocont">{obj.todotoday}</h3>
<div className="todoboxbtn">
<TodoIcon />
</div>
</div> )
})
}
</div>
)
2条答案
按热度按时间5us2dqdw1#
因为“一件事”和“很多事”是有区别的。
这个状态代表了很多东西(数组):
但是这个状态代表一件事(一个单一的值):
那么,当
isChecked
是true
时,它适用于myArray
的哪个元素?目前,您的选项是“全部”或“没有”。也许你想存储
id
值,而不是只存储一个布尔值?例如:那么
checkedItem
将包含当前选中的一个“项”的id
。然后比较代码中的id
,以有条件地设置元素样式:或者,如果您想将“检查项”作为“许多事物”来跟踪,那么这将是一个数组。例如:
检查/取消检查项将是在该数组中添加/删除项的问题。例如:
JSX标记中的条件是检查数组 * 是否包含 *
obj.id
值(而不是 * 是 *obj.id
值)。例如:eufgjt7s2#
为了使这段代码正常工作,你应该将
isChecked
属性添加到你的数据中,并修改你更新状态的方式。你的最终代码看起来像这样: