• Jobs
  • About Us
  • professionals
    • Home
    • Jobs
    • Courses and challenges
  • business
    • Home
    • Post vacancy
    • Our process
    • Pricing
    • Assessments
    • Payroll
    • Blog
    • Sales
    • Salary Calculator

0

118
Views
Cambie todas las casillas de verificación dinámicas a verdadero en handleClick

¡¡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.

about 3 years ago · Juan Pablo Isaza
2 answers
Answer question

0

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); };
about 3 years ago · Juan Pablo Isaza Report

0

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); }
about 3 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Our process Sales
Legal
Terms and conditions Privacy policy
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recommend me some offers
I have an error