Estoy trabajando en una aplicación de prueba en React y he creado algunas funciones para mostrar la pregunta y las respuestas y también la función para seleccionar los botones de opción como respuestas. Sin embargo, el problema al que me enfrento es que no sé cómo enviar el formulario y obtener el valor del botón de opción seleccionado, y luego incrementar la score en 1 si la respuesta seleccionada es correcta.
Aquí está mi JSX:
<form className="answer_div"> {questions[currentQuestion].answerOptions.map( (answerOption) => ( <div> <input type="radio" value={answerOption.answerText} name={"answerOption"} >answerOption.answerText} </div> ) )} <input type="submit" value="Submit" onSubmit={handleFormSubmit} /> </form>Estoy representando la pregunta y las respuestas de un objeto js que se ve así:
export const questions = [ { questionText: "who is the ceo of tesla:", answerOptions: [ { answerText: "elon musk", isCorrect: false, }, { answerText: "jeff bezos", isCorrect: true, }, { answerText: "sundar pichai", isCorrect: false, }, { answerText: "tom cruise.", isCorrect: false, }, ], },];
Quiero incrementar el puntaje en 1 si isCorrect es verdadero
aquí está el estado que quiero incrementar en 1 si el valor de la respuesta enviada es correcto:
const [score, setScore] = useState(0);¿Cómo puedo lograr la funcionalidad anterior?
form . Si usa un estado, puede almacenar la posición de la casilla de verificación (respuesta) en el estado y usar el atributo checked de la entrada (casilla de verificación) para comparar el índice con el estado.
vea un ejemplo: https://codesandbox.io/s/pedantic-oskar-ouov3e?file=/src/App.js:701-1196
Esto es lo que puedes hacer:
Paso 1: agregue el atributo onChange a la etiqueta de input de radio, y "onChange" ejecute la función handleCorrect .
<div> <input type="radio" value={answerOption.answerText} name={"answerOption"} onChange={(e) => handleCorrect(answerOption, e)} />{answerOption.answerText} </div>Paso 2: ahora en la función handleCorrect puede guardar la respuesta en una variable global o como en el estado.
handleCorrect = (a,e) => { if(e.target.checked){ answer = a; } console.log(e.target.checked, a); }Paso 3: Luego, en la función handleFormSubmit, puede verificar si la respuesta fue correcta e incrementar la puntuación.
handleFormSubmit = () =>{ if(answer.isCorrect){ setScore(score+1); } }Cambie el valor de isCorrect true false al cambiar la opción de radio.
En el envío del formulario, obtenga y verifique si el valor isCorrect es verdadero y luego aumente la puntuación en uno más 0.
const [isCorrect, setIsCorrect] = useState(false); const [score, setScore] = useState(0); return <form className="answer_div" onSubmit={e => { e.preventDefault(); setScore(isCorrect === "true" ? 1 : 0); }}> {questions[currentQuestion].answerOptions.map((answerOption, index) => ( <div key={index}> <input type="radio" name="answerOption" value={answerOption.isCorrect} onChange={e => setIsCorrect(e.target.value)} /> {answerOption.answerText} </div> ))} <input type="submit" value="Submit" /> </form>