Tengo una lista de 6 elementos y sus respectivas casillas de verificación. Por ejemplo, he seleccionado 4 casillas de verificación de 6. Ahora, con un clic en el botón, tengo que desmarcar las 4 casillas de verificación que están seleccionadas o no seleccionadas. Por favor, alguien que me ayude con el solución aquí.
código:
import React, { useState } from "react"; import ReactDOM from "react-dom"; import "./App.css"; export default function App() { const checkList = ["Apple", "Banana", "Tea", "Coffee","orange","cookie"]; const handleCheck = (event) => {}; return ( <div className="app"> <div className="checkList"> <div className="title">Your CheckList:</div> <div className="list-container"> {checkList.map((item, index) => ( <div key={index}> <input value={item} type="checkbox" onChange={handleCheck} /> <span>{item}</span> </div> ))} </div> </div> <div> <button onclick>Reset all checkbox</button> </div> </div> ); }Como no proporcionó su código, escribí algo con mi sentido.
// example with list const [list, setList] = React.useState([]); // do as much as checkbox as you want, but // with different value <input type={"checkbox"} value={some_value} checked={list.includes(some_value)} onChange={(e) => { e.target.checked ? setList([...list, e.target.value]) : setList([...list].filter((o) => o !== e.target.value)); }} />; // on submit or click of button const onSubmit = () => { setList([]); };Puede hacer esto usando useState hook y tener una matriz de objetos en lugar de una matriz de cadenas y también usar directamente el índice de la matriz como clave no es una buena práctica en reaccionar.
import React, { useState } from "react"; function transformArray(arr) { let retObj = arr.map((item, index) => ({ key: index, item, checked: false })); return retObj; } function App() { let [checkList, setCheckList] = useState( transformArray(["Apple", "Banana", "Tea", "Coffee", "orange", "cookie"]) ); const handleCheck = (event) => { let _list = Array.from(checkList); _list[event.target.name].checked = !_list[event.target.name].checked; setCheckList(_list); }; const resetCheckbox = () => { setCheckList( checkList.map(({ key, item }) => ({ key, item, checked: false })) ); }; return ( <div className="app"> <div className="checkList"> <div className="title">Your CheckList:</div> <div className="list-container"> {checkList.map((item, index) => ( <div key={item.key}> <input checked={item.checked} type="checkbox" name={index} onChange={handleCheck} /> <span>{item.item}</span> </div> ))} </div> </div> <div> <button onClick={resetCheckbox}>Reset all checkbox</button> </div> </div> ); } export default App;La matriz de la lista de verificación debe contener el atributo que indica si el elemento está marcado o no, por lo que primero debe configurar la lista de esta manera:
const [checkList, setCheckList] = useState([ { item: "Apple", checked: false }, { item: "Banana", checked: false }, { item: "Tea", checked: false }, { item: "Coffee", checked: false }, { item: "orange", checked: false }, { item: "cookie", checked: false } ]);luego, en la función de reinicio, debe establecer todos los valores verificados en falso:
const resetClick = () => { for (const item of checkList) { item.checked = false; } setCheckList([...checkList]); };y paas esta función para reseccionar el evento onClick del botón. A continuación se muestra el código de trabajo completo, ¡espero que ayude!
import { useEffect, useState } from "react"; import "./styles.css"; export default function App() { const [checkList, setCheckList] = useState([ { item: "Apple", checked: false }, { item: "Banana", checked: false }, { item: "Tea", checked: false }, { item: "Coffee", checked: false }, { item: "orange", checked: false }, { item: "cookie", checked: false } ]); const handleCheck = (event) => { const index = checkList.findIndex((list) => list.item == event.target.name); checkList[index].checked = event.target.checked; setCheckList([...checkList]); }; const resetClick = () => { for (const item of checkList) { item.checked = false; } setCheckList([...checkList]); }; useEffect(() => { console.log(checkList); }, [checkList]); return ( <div className="app"> <div className="checkList"> <div className="title">Your CheckList:</div> <div className="list-container"> {checkList.map((item, index) => ( <div key={index}> <input name={item.item} value={item.checked} checked={item.checked} type="checkbox" onChange={handleCheck} /> <span>{item.item}</span> </div> ))} </div> </div> <div> <button onClick={resetClick}>Reset all checkbox</button> </div> </div> ); }