0
116
Vistas¿Cómo llenar una matriz de valores booleanos en el evento de cambio de casilla de verificación?
Lo que me gustaría hacer es llenar la matriz de respuestas con valores booleanos. Mis casillas de verificación se completan dinámicamente, pero solo habrá cuatro de ellas. Si la casilla de verificación no está marcada, su valor debe ser falso y, si está marcada, debe ser verdadero. Los valores deben corresponder al índice de matriz, es decir, si se cambia la primera casilla de verificación, solo deben cambiar las respuestas [0], si se cambia la segunda casilla de verificación, entonces las respuestas [1 ] y así..
Caja de arenahttps://codesandbox.io/s/elated-thompson-7rthy?file=/src/App.js
También agradecería si me puede ayudar a establecer el valor marcado también.
Al final, estoy configurando estos valores en el almacén de contexto para que se envíen al servidor al final.
const Quiz1 = (props) => { const [answers, setAnswers] = useState([false, false, false, false]); const handleChange = (e) => { setAnswers([...answers, e.target.checked]); setQuizState({ id: 0, question_id: question.question_id, answer: [answers] }); }; return ( {question?.options?.map((option, i) => { <Checkbox id={i} name={option} checked={WHAT TO PUT HERE?} onChange={(e) => handleChange(e)} />} ) }2 Respuestas
Responde la pregunta0
Puede hacer una copia superficial del estado y cambiar su valor. Aquí está la muestra simple de lo que desea:
import { useEffect, useState } from "react"; const Quiz1 = (props) => { const question = { options: ["1", "2", "3", "4"] }; const [answers, setAnswers] = useState([false, false, false, false]); useEffect(() => { console.log(answers); }, [answers]); const handleChange = (e, i) => { let copy = [...answers]; let current = copy[i]; current = e.target.checked; copy[i] = current; setAnswers(copy); }; return question?.options?.map((option, i) => { return ( <> <label>{option}</label> <input aria-label={option} id={i} name={option} checked={answers[i]} type="checkbox" onChange={(e) => handleChange(e, i)} /> </> ); }); }; export default function App() { return <Quiz1 />; } 
0
Si lo entiendo correctamente, puede usar el índice de su función de mapa para usar el índice de respuesta correcto.
checked={answer[i]}
Configurar setAnswers([...answers, e.target.checked]) agregará el nuevo valor del nuevo evento a su matriz de respuestas. En su lugar, debe anular el valor de la respuesta.
answer[i] = e.target.value