通过复选框组件获取未定义的值

Question

我在handleClick 函数内的isChecked 中未定义。你能检查一下我在这里做错了什么吗？ 如果我这样做 console.log(selectedlistItems.includes(id));我得到了真/假值。 我使用相同的逻辑来设置 isChecked isChecked={selectedlistItems.includes(item.id)}

import "./styles.css";

import { useState } from "react";
import CheckBox from "./CheckBox";
import { list } from "./List";

export default function App() {
  const [listItems, setListItems] = useState(list);
  const [selectedlistItems, setselectedlistItems] = useState([]);

  const handleClick = (e) => {
    const { id, isChecked } = e.target;

    console.log(isChecked);
    console.log(selectedlistItems.includes(id));

    if (!selectedlistItems.includes(id)) {
      
      setselectedlistItems([...selectedlistItems, id]);
    } else {
      
      setselectedlistItems(selectedlistItems.filter((item) => item !== id));
    }
  };
  console.log(selectedlistItems);
  return (
    <div>
      {listItems.map((item) => {
        return (
          <>
            <CheckBox
              key={item.id}
              name={item.name}
              id={item.id}
              handleClick={handleClick}
              isChecked={selectedlistItems.includes(item.id)}
            />
            {item.name}
          </>
        );
      })}
    </div>
  );
}

const CheckBox = ({ id, name, handleClick, isChecked }) => {
  return (
    <input
      id={id}
      name={name}
      type="checkbox"
      onChange={handleClick}
      checked={isChecked}
    />
  );
};

export default CheckBox;

Answer 1

checkboxe 没有 isChecked 属性。相反，您应该直接访问 event 目标的 checked 属性。

改变：

const { id, isChecked } = e.target;

致：

const { id } = e.target;
const isChecked = e.target.checked;