在 handleClick 上将所有动态复选框切换为 true

Question

求助！！全部打开和关闭

  import "./styles.css";
  import React, { useState, useEffect } from "react";
  import Checkbox from "@mui/material/Checkbox";
  import Switch from "@mui/material/Switch";

  interface dataProps {
  name: string;
  yes: boolean;
  }

   const data = [
  { name: "a", yes: false },
  { name: "b", yes: true },
  { name: "c", yes: true },
  { name: "d", yes: false }
  ];

  export default function App() {
  const [list, setList] = useState<Array<dataProps>>([]);

  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) =>          {
  if (event.target.checked) {
  const newArr = data.map((el, index) => ({
    ...el,
    yes: !el.yes
  }));
  setList(newArr);
  } else if (!event.target.checked) {
  const newArr = data.map((el, index) => ({
    ...el,
    yes: el.yes
  }));
  setList(newArr);
  }
  };
  useEffect(() => {
  setList(data.map((d) => d));
  }, []);

  return (
  <div className="App">
  <Switch onChange={handleChange}></Switch>
  {list.map((d, i) => {
    return <Checkbox checked={d.yes} key={i} />;
  })}
</div>
);
}

我想在 handleclick 上将所有复选框切换为 true 或 false。

现在它只能将 false 切换为 true 以及将 true 切换为 false。这是我到目前为止。沙盒代码：https://codesandbox.io/s/kind-black-0dpsi9?file=/src/App.tsx:0-1095 感谢您的帮助。

Answer 1

您的代码运行正常。如果您希望它像您描述的那样工作，您需要将其更改为：

  if (event.target.checked) {
  const newArr = data.map((el, index) => ({
    ...el,
    yes: true
  }));
  setList(newArr);
  } else if (!event.target.checked) {
  const newArr = data.map((el, index) => ({
    ...el,
    yes: false
  }));
  setList(newArr);
  }

Answer 2

要在开关打开时将所有复选框设置为真，在开关关闭时将所有复选框设置为假，您需要将属性 'yes' 设置为 event.target.checked.现在您将属性 'yes' 设置为 !el.yes 如果它为假，则将其设置为真，如果为真，则将其设置为假。这是 handleChange 函数的更新版本，可以解决您的问题：

const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
      const newArr = data.map((el, index) => ({
        ...el,
        yes: event.target.checked
      }));
      setList(newArr);
  };

在 handleClick 上将所有动态复选框切换为 true

Toggle all dynamic Checkbox to true on handleClick

javascript

checkbox

logic

boolean

reactjs