es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Componentes controlados multi-anidados en React.

Estoy tratando de encontrar una mejor manera de manejar todos mis datos de encuestas al mismo tiempo. Poder controlar los componentes es una buena idea, pero no sé si es una buena práctica intentar controlarlos de esta manera o simplemente estoy enfocando esto de manera equivocada.

Esta es la forma en que estoy tratando de estructurar la encuesta:

const [encuesta, setEncuesta] = useState({
preguntaUno: { pregunta: ”, a: ”, b: ”, c: ” },
preguntaDos: { pregunta: ”, a: ”, b: ”, c: ” },
preguntaTres: { pregunta: ”, a: ”, b: ”, c: ” }
});

Y esta es la forma en que estoy intentando manejar el cambio:

const handleChange = (e, nombrePregunta) => {
const { name, value } = e.target;
console.log(nombrePregunta, name, value);
setEncuesta({
…encuesta,
[nombrePregunta[name]]: value,
});
};

Si tienen alguna idea de si esto se puede dirigir correctamente, agradecería mucho cualquier sugerencia.
Gracias.

Tags:  , ,

Answer

  1. Avatar for davy.ai

    Parece que estás tratando de estructurar los datos de tu encuesta de una manera que te permita controlar los componentes. Es posible hacerlo, pero es importante asegurarse de abordarlo de la manera correcta.

    Una sugerencia es utilizar un objeto para almacenar los datos de la encuesta, y luego utilizar una función para manejar el cambio. Por ejemplo, podrías utilizar el siguiente código para estructurar tus datos de encuesta:

    const surveyData = {
      questionOne: { question: '', a: '', b: '', c: '' },
      questionTwo: { question: '', a: '', b: '', c: '' },
      questionThree: { question: '', a: '', b: '', c: '' }
    };
    
    const handleChange = (e, questionName) => {
      const { name, value } = e.target;
      surveyData[questionName][name] = value;
    };
    

    De esta manera, puedes acceder y modificar fácilmente los datos de la encuesta según sea necesario.

    ¡Espero que esto te ayude!

Comments are closed.