如何解决通过id onClick更改样式只能在反应中起作用一次
我正在尝试为添加的每个任务更改每个列表项上的样式,并且它可以工作……但仅一次。单击“完成”后,它应该删除任务并运行样式。我假设其余任务无法正常工作,因为id仅应属于一个元素。我怎样才能解决这个问题?这是html
{tasks.map((x,key) => {
return (
<div className="task-list-item">
<ul>
<li className="li-title" id="title" key={key}>
{x.title}
</li>
<li className="li-desc" id="desc" key={key}>
{x.description}
</li>
</ul>
<div className="btn-container">
<button onClick={handleStyleComplete} className="task-btns">
Complete
</button>
<button className="task-btn-del">Delete</button>
</div>
</div>
);
这是onClick函数
const handleStyleComplete = (e) => {
document.getElementById("title").style.textDecoration = "line-through";
document.getElementById("title").style.color = "grey";
document.getElementById("desc").style.textDecoration = "line-through";
document.getElementById("desc").style.color = "grey";
e.target.style.backgroundColor = "transparent";
e.target.style.cursor = "auto";
e.target.style.border = "none";
e.target.style.color = "transparent";
};
我尝试使用getElementByClassName.style,但这不起作用。
这里是https://i.stack.imgur.com/m5mfM.png
的样子解决方法
除了使用document.getElementById之外,您还可以根据元素在任务中完成或不完成的状态,对元素应用不同的样式。
例如:-
const [tasks,setCompleteTasks] = React.useState([]);
const handleStyleComplete = (id) => {
// tell your state here,that these task is complete.
setCompleteTasks([...tasks,id]);
};
{tasks.map((x,key) => {
// using this derived state you could apply styles here
const isCompleteTask = tasks.includes(x.id);
return (
<div className="task-list-item">
<ul>
<li className={isCompleteTask ? 'lineThroughStyles' : 'li-title'} id="title" key={key}>
{x.title}
</li>
<li className="li-desc" id="desc" key={key}>
{x.description}
</li>
</ul>
<div className="btn-container">
<button onClick={() => completeTasks(x.id)} className={isCompleteTask ? 'taskCompleteButtonStyles' : 'task-btns'}>
Complete
</button>
<button className="task-btn-del">Delete</button>
</div>
</div>
);
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。