react18 的todolist

import { useState } from "react";
import { useImmer } from "use-immer";

const App = () => {
  // 使用useState管理输入框中的姓名
  const [name, setName] = useState("");
  
  // 使用useImmer管理员工列表，初始包含一个员工"老王"
  const [person, setPerson] = useImmer([{ id: 0, name: "老王", check: false }]);
  
  // 删除指定id的员工
  const deleteTab = (item) => {
    // 使用filter创建新数组，排除要删除的员工
    setPerson(person.filter((i) => i.id !== item.id));
  };
  
  // 处理复选框状态变化
  const handleCheck = (id, checked) => {
    // 使用immer的draft模式直接修改状态
    setPerson((draft) => {
      const checkItem = draft.find((i) => i.id === id);
      checkItem.check = checked;
    });
  };

  return (
    <>
      <h1>小天的员工列表：</h1>
      
      {/* 输入新员工姓名的输入框 */}
      <input value={name} onChange={(e) => setName(e.target.value)} />
      
      {/* 添加新员工的按钮，点击时创建新员工对象 */}
      <button
        onClick={() => {
          setPerson([
            ...person,
            { id: person.length, name: name, check: false },
          ]);
        }}
      >
        添加
      </button>
      
      {/* 渲染员工列表 */}
      <ul>
        {person.map((item) => (
          <li key={item.id}>
            {/* 员工选择复选框，状态变化时调用handleCheck */}
            <input
              type="checkbox"
              checked={item.check}
              onChange={(e) => handleCheck(item.id, e.target.checked)}
            ></input>
            {item.name}
            {/* 删除员工按钮，点击时调用deleteTab */}
            <button onClick={() => deleteTab(item)}>删除</button>
          </li>
        ))}
      </ul>
    </>
  );
};

export default App;