通过 id onClick 更改样式只反应一次

Question

我正在尝试为每个添加的任务更改每个列表项的样式并且它有效...但只有一次。单击 'complete' 后，它应该划掉任务和运行样式。我假设其余任务不起作用，因为 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

Answer 1

除了使用 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>
              );

通过 id onClick 更改样式只反应一次

changing styles by id onClick in react only working once

html

css

inline-styles

reactjs