Estoy trabajando en un proyecto de encuesta, donde tengo un componente de reacción 'Preguntas', un componente secundario 'QuestionOptions' con varios elementos secundarios 'Radio', 'TextBox', 'Checkbox'. Algunas preguntas en la base de datos tienen opciones (opción múltiple). Quiero encontrar una manera de recopilar todas las respuestas respondidas por el usuario y enviarlas a la base de datos.
Este es el componente Preguntas:
const Questions = () => { const [questions, setQuestions] = useState([]) var game_id = localStorage.getItem('game_id') useEffect(() => { axios .post("http://127.0.0.1:8000/api/v1/questions/get_questions", { game_id: game_id }) .then((response) => { const s = response.data.questions; setQuestions(s); }); }, []); return ( <div> <ul> {questions.map((question) => ( <div key={question.id}> <li key={question.id}>{question.question} ({question.points} points)</li> <QuestionOptions question_id={question.id} question_type={question.question_type_id}/> </div> ))} </ul> <Button text={"Submit"} id={"submit_btn"}/> </div> ); };Este es el componente QuestionOptions:
const QuestionOptions = (props) => { const [options, setOptions] = useState([]); const question_type = props.question_type; useEffect(() => { axios .post("http://127.0.0.1:8000/api/v1/question_options/get_options", { question_id: props.question_id, }) .then((response) => { setOptions(response.data["options"]); }); }, [props.question_id]); if(question_type === 0){ return( <TextBox /> ) }else if(question_type === 1){ return( <Radio options={options}/> ) }else if(question_type === 2){ return( <Checkbox options={options}/> ) } };Los componentes TextBox, Radio y Checkbox tienen el siguiente aspecto:
import React from "react"; const TextBox = () => { return <input type={"text"} />; }; export default TextBox;Por lo tanto, quiero que el usuario responda todas las respuestas y deshabilitar el botón Enviar si no se responden todas las preguntas.
El componente Preguntas tiene el siguiente aspecto:
¿Cuál es su nombre? .(la entrada va aquí)
¿Cuál es tu color favorito? . Opción 1 . opcion 2 . opción3
¿Cuál es la mejor manera de hacer que eso suceda?
Aquí hay un ejemplo con dos tipos de preguntas: unas con una opción de botón Guardar, otras que actualizan las respuestas directamente. Verifique la salida de console.log después de hacer clic en el botón Guardar o escriba la respuesta en la tercera pregunta.
let questions = [ { q: 'How old are you?', id: 0 }, { q: 'How many pets do you have?', id: 1 }, { q: 'Where were you born?', id: 2, type: 'NoSaveBtn' }, ]; let Question = (props) => { let [value, setValue] = React.useState(''); return ( <div> <div>{props.q}</div> <input value={value} onChange={(e) => setValue(e.target.value)}></input> <button onClick={() => { props.onSaveAnswer(value); }} > save answer </button> </div> ); }; let QuestionNoSaveBtn = (props) => { return ( <div> <div>{props.q}</div> <input value={props.value || ''} onChange={(e) => props.onSaveAnswer(e.target.value)} ></input> </div> ); }; export default function App() { let [answers, setAnswers] = React.useState({}); console.log(answers); return ( <div> {questions.map((x) => x.type !== 'NoSaveBtn' ? ( <Question q={xq} key={x.id} onSaveAnswer={(answer) => setAnswers({ ...answers, [x.id]: answer }) } /> ) : ( <QuestionNoSaveBtn q={xq} key={x.id} value={answers[x.id]} onSaveAnswer={(answer) => setAnswers({ ...answers, [x.id]: answer }) } /> ) )} </div> ); }