为什么我的绿色边框不切换？（消失）

Question

为什么我不能在每个 div 中切换类名？
当我双击每个 div 中的 h1 标签时，我想给每个 div 一个绿色边框
当我再次双击时我希望边框消失
我放个图让你了解我的情况
如果没有得到问题下方的问题评论

const { useState, Fragment } = React;
const tasks = [
    {
        id: 1,
        title:
            "sunt aut facere repellat provident occaecati excepturi optio reprehenderit",
        body: "quia et suscipit\nsuscipit recusandae consequuntur expedita et cum\nreprehenderit molestiae ut ut quas totam\nnostrum rerum est autem sunt rem eveniet architecto",
        reminder: false,
    },
    {
        id: 2,
        title: "qui est esse",
        body: "est rerum tempore vitae\nsequi sint nihil reprehenderit dolor beatae ea dolores neque\nfugiat blanditiis voluptate porro vel nihil molestiae ut reiciendis\nqui aperiam non debitis possimus qui neque nisi nulla",
        reminder: false,
    },
    {
        id: 3,
        title: "ea molestias quasi exercitationem repellat qui ipsa sit aut",
        body: "et iusto sed quo iure\nvoluptatem occaecati omnis eligendi aut ad\nvoluptatem doloribus vel accusantium quis pariatur\nmolestiae porro eius odio et labore et velit aut",
        reminder: false,
    },
];

function Tasks() {
    const [initial_tasks, setTasks] = useState(tasks);
    const onDelete = (the_id) => {
        setTasks(initial_tasks.filter((task) => task.id !== the_id));
    };
    const toggle = function (the_id) {
        setTasks(
            tasks.map((task) =>
                task.id == the_id ? { ...task, reminder: !task.reminder } : task
            )
        );
    };

    return (
        <Fragment>
            {initial_tasks.length
                ? initial_tasks.map((task) => (
                        <div className={`task ${task.reminder ?                     "reminder-style" : ""}`}>
<h1 onDoubleClick={() => toggle(task.id)}>{task.id}</h1>
                            <p
                                onClick={() => {
                                    onDelete(task.id);
                                }}
                            >
                                {task.title}
                            </p>
                        </div>
                  ))
                : "no items"}
        </Fragment>
    );
}

.reminder-style {
    border: 3px solid green;
}

<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.0.0/umd/react.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.0.0/umd/react-dom.development.js"></script>

Answer 1

检查这部分代码。

const toggle = function (the_id) {
  setTasks(
    tasks.map((task) =>
      task.id == the_id ? { ...task, reminder: !task.reminder } : task
    )
  );
};

您总是在检查 tasks 变量，它是一个常量值。而不是使用你的 initial_tasks。您将获得您的功能。

为什么我的绿色边框不切换？（消失）

Why my green border doesn't toggle?(disappear)

javascript

css

toggle

reactjs

react-dom