第一次单击不触发onClick，第二次单击按预期操作
第一次单击不触发onClick，第二次单击按预期操作
提问于 2022-11-21 21:21:03
当我按onclick()按钮时，我希望SVG图片改变。但它只适用于第二媒体。
const [taskList, setTaskList] = useState([]);
const [indexTask, setIndexTask]=useState({});
const [statusTask, setStatusTask]=useState(false);
const markComplete = (props)=>{
let tempList = taskList;
for(let i=0; i<tempList.length; i++){
if(indexTask===i){
tempList[i].status = props;
}
}
setTaskList([...tempList]);
} {taskList.map((obj,i)=>
<div key={i} className='div-task'>
<div className='div-task-container'>
<div className='div-task-status'>
<div className='div-task-status-complete' onClick={()=>{markComplete(true); setIndexTask(i)}} role={'button'}>
<SvgTaskUncomplete statusTask={obj.status} setStatusTask={setStatusTask} ></SvgTaskUncomplete>
</div>
<div className='div-task-status-uncomplete' onClick={()=>{markComplete(false); setIndexTask(i)}} role={'button'}>
<SvgTaskComplete statusTask={obj.status} setStatusTask={setStatusTask}></SvgTaskComplete>
</div>
回答 1
Stack Overflow用户
发布于 2022-11-21 22:24:27
看来，发布的代码可能与indexTask状态过于复杂。
尝试这个直接将index传递给markComplete的版本：
const [taskList, setTaskList] = useState([]);
const [statusTask, setStatusTask]=useState(false);
const markComplete = (status, index) => {
const tempList = [...taskList];
tempList[index].status = status;
setTaskList(tempList);
};{taskList.map((obj,i)=>
<div key={i} className='div-task'>
<div className='div-task-container'>
<div className='div-task-status'>
<div className='div-task-status-complete' onClick={()=>{markComplete(true, i)}} role={'button'}>
<SvgTaskUncomplete statusTask={obj.status} setStatusTask={setStatusTask} ></SvgTaskUncomplete>
</div>
<div className='div-task-status-uncomplete' onClick={()=>{markComplete(false, i)}} role={'button'}>
<SvgTaskComplete statusTask={obj.status} setStatusTask={setStatusTask}></SvgTaskComplete>
</div>张贴的代码是部分的，所以不能测试它，但希望这仍然可以作为参考。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/74525019
复制相关文章
相似问题
腾讯云开发者
