¡¡AYUDA!! activar y desactivar todo
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> ); }quiero cambiar todas las casillas de verificación a verdadero o falso en handleclick.
en este momento solo cambia de falso a verdadero y de verdadero a falso. esto es lo que tengo hasta ahora. Código Sandbox: https://codesandbox.io/s/kind-black-0dpsi9?file=/src/App.tsx:0-1095 se agradece cualquier ayuda.
Para establecer todas las casillas de verificación en verdadero cuando el interruptor está activado y establecer todas las casillas de verificación en falso cuando el interruptor está desactivado, debe establecer la propiedad 'sí' en event.target.checked. En este momento, está configurando la propiedad 'yes' en !el.yes, que la configurará como verdadera si es falsa y como falsa si es verdadera. Aquí está la versión actualizada de su función handleChange que resolverá su problema:
const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => { const newArr = data.map((el, index) => ({ ...el, yes: event.target.checked })); setList(newArr); };Su código está haciendo exactamente lo que debería. Si desea que funcione como lo ha descrito, debe cambiarlo a:
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); }