Tengo algunas casillas de verificación que se muestran usando la función .map() que está recuperando los datos de un archivo JSON .
Lo que he logrado hasta ahora es almacenar la casilla de verificación en el estado (que es un objeto). Pero después de hacer clic en otra casilla de verificación, elimina la anterior y almacena la última.
Básicamente, quiero almacenar todos los marcados y, si los elimina, eliminarlos del estado.
Aquí está mi función handleCheck() :
const handleCheckInput = ( e: React.ChangeEvent<HTMLInputElement>, key: number, questionId: number, ) => { let newTickArray = [...tick]; newTickArray[key] = !tick[key]; setTick(newTickArray); setValues({ ...values, [questionId]: e.target.value }); };Cualquier ayuda será apreciada
Cambiado [questionId]: e.target.checked a [questionId]: e.target.value .
Así es como lo hace (utilicé puntos suspensivos ... para las partes que no necesitan cambiarse y también por brevedad):
(También recuerde usar e.target.checked , la propiedad correcta para los elementos de casilla de verificación, en lugar de e.target.value ).
const handleCheckInput = ( e: React.ChangeEvent<HTMLInputElement>, key: number, questionId: number) => { ... if (e.target.checked) { setValues({ ...values, [questionId]: e.target.value}); } else { // Remove unchecked from state. let { [questionId]: deletedKey, ...restOfObj } = values; setValues(restOfObj); } };