React Todo列表中的每个项目都在交叉

Question

我正在尝试在React中列出待办事项清单。几乎所有内容都可以正常工作，只是当我单击特定任务时，它不仅跨越了特定任务，还可以跨越列表中的每个任务。

我已经使用了React路由器来制作三个“全部”，“ Active”和“已完成”的路线，并将道具从应用程序传递给了它们的组件。我在 app.js 切换类中使用的状态是：

const [checkClass, setCheckClass] = React.useState(false);
function toggleClass() {
  setCheckClass((prevClass) => !prevClass);
}

然后，我通过路由将此状态和toggle（）函数作为prots 任务容器组件，最终到任务

app.js

    import React from "react";
import { BrowserRouter as Router, Routes, Route, Link } from "react-router-dom";
import All from "./components/All/All.jsx";
import Active from "./components/Active/Active.jsx";
import Completed from "./components/Completed/Completed";
import "./App.css";

function App() {
  const [task, setTask] = React.useState([
    {
      id: Date.now() + "" + Math.floor(Math.random() * 78),
      text: "Go for Shopping",
      key: Date.now() + "" + Math.floor(Math.random() * 78),
      isDone: false,
      index: 1,
    },
    {
      id: Date.now() + "" + Math.floor(Math.random() * 78),
      text: "Do Assignment",
      key: Date.now() + "" + Math.floor(Math.random() * 78),
      isDone: false,
      index: 2,
    },
  ]);

  function addTask(item) {
    const tempTask = [...task];
    tempTask.push({
      id: item.id,
      text: item.text,
      key: item.key,
      isDone: item.isDone,
    });
    setTask(tempTask);
  }

  const [checked, setChecked] = React.useState();

  const handleCheck = (event) => {
    var updatedList = [...checked];
    if (event.target.checked) {
      updatedList = [...checked, event.target.value];
    } else {
      updatedList.splice(checked.indexOf(event.target.value), 1);
    }
    setChecked(updatedList);
  };

  function deleteTask(id) {
    const tempTask = [...task];
    const index = tempTask.findIndex((item) => item.id === id);
    if (index < 0) return;
    tempTask.splice(index, 1);
    setTask(tempTask);
  }

  const [checkClass, setCheckClass] = React.useState(false);

  function toggleClass() {
    setCheckClass((prevClass) => !prevClass);
  }

  return (
    <div className="App">
      <Router className="App_Router">
        <h1 className="App_Title">#justDo-It</h1>
        <nav className="App_Nav">
          <Link to="/all" className="App_Nav_Link">
            All
          </Link>
          <Link to="/active" className="App_Nav_Link">
            Active
          </Link>
          <Link to="/completed" className="App_Nav_Link">
            Completed
          </Link>
        </nav>
        <Routes>
          <Route
            path="/all"
            element={
              <All
                isDone={task.isDone}
                task={task}
                addTask={addTask}
                handleCheck={handleCheck}
                deleteTask={deleteTask}
                checkClass={checkClass}
                toggleClass={toggleClass}
              />
            }
          ></Route>
          <Route
            path="/active"
            element={
              <Active
                isDone={task.isDone}
                task={task}
                addTask={addTask}
                handleCheck={handleCheck}
                deleteTask={deleteTask}
                checkClass={checkClass}
                toggleClass={toggleClass}
              />
            }
          ></Route>
          <Route
            path="/completed"
            element={
              <Completed
                isDone={task.isDone}
                task={task}
                handleCheck={handleCheck}
                deleteTask={deleteTask}
                checkClass={checkClass}
                toggleClass={toggleClass}
              />
            }
          ></Route>
        </Routes>
        <footer className="footer">
          <p>
            Crated by{" "}
            <a
              href="https://github.com/sidramwaseem"
              target="_blank"
              rel="noreferrer"
            >
              Sidra
            </a>{" "}
            - devChallenges.io{" "}
          </p>
        </footer>
      </Router>
    </div>
  );
}

export default App;

task.jsx

任务组件中收到的道具类似于：

import React from "react";
import DeleteIcon from "../../assets/delete-icon.png";
import "./Task.css";

function Task(props) {


  return (
    <div className="task-container">
      <div className="task-container_check">
        <input
          type="checkbox"
          name="isDone"
          id={props.id}
          onChange={props.handleCheck}
          onClick={()=> props.toggleClass(props.id)}
          checked={props.checkClass}
        />
        <label
          htmlFor={props.id}
          value={props.checkClass}
          className={props.checkClass ? "checked-item" : "unchecked-item"}
        >
          {props.text}
        </label>
      </div>
      <img src={DeleteIcon} alt="delete-icon" className="delete-icon" onClick={()=>props.deleteTask(props.id)} />
    </div>
  );
}

export default Task;