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.

cómo cambiar -botón de radio antd

12 Jun, 2023 Programación

Tengo una pregunta con el arreglo “arr” y el bucle “for each”. Quiero renderizar la pregunta y las respuestas de botón de radio de “antd”.

El problema es que cuando cambio cualquier pregunta, todas las respuestas también cambian a la misma respuesta que cambié en la primera pregunta. ¿Existe alguna forma de agregar una clave o identificación al botón de radio y cambiarlo mediante esa clave o alguna ayuda? Este es mi código:

 import { Radio } from "antd";
 const { questions} = props;
 const [value, setValue] = useState(1);

 const onChange = e => {
        setValue(e.target.value);
};

{questions.map((question, i) => {                     
            return (<div><div>{question.Description}</div>
            <radio.group value="{value}" onchange="{onChange}">
                 <radio value="{1}">A</radio>
                 <radio value="{2}">B</radio>
                 <radio value="{3}">C</radio>
            </radio.group></div>) 
 })}
Tags:  , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Solución del Experto en TI

    Para resolver el problema de que todas las respuestas cambiaban a la misma cuando se cambiaba cualquier pregunta, es necesario establecer una clave o id única para cada respuesta de botón de radio. Esto se puede hacer utilizando el índice de la pregunta en la matriz de preguntas como clave o id para cada respuesta de botón de radio.

    Así es como puede modificar su código para lograr esto:

    import { Radio } from 'antd';

const { questions } = props;
const [answers, setAnswers] = useState(Array(questions.length).fill(1));

const onChange = (e, i) => {
  const newAnswers = [...answers];
  newAnswers[i] = e.target.value;
  setAnswers(newAnswers);
};

{questions.map((question, i) => (
  <div key="{i}">
    <div>{question.Description}</div>
    <<radio.group value="{answers[i]}" onchange="{(e)" ==""> onChange(e, i)}>
      <radio value="{1}">A</radio>
      <radio value="{2}">B</radio>
      <radio value="{3}">C</radio>
    </radio.group>
  </div>
))}

    En este código modificado, hemos creado una nueva variable de estado answers, que es una matriz que almacena la respuesta seleccionada para cada pregunta. Hemos inicializado esta matriz con un valor predeterminado de 1 para cada pregunta.

    También hemos modificado la función onChange para tomar un argumento adicional i, que representa el índice de la pregunta cuya respuesta ha cambiado. Este valor i se utiliza para actualizar la matriz answers con la nueva respuesta seleccionada.

    Finalmente, en la función map, hemos establecido la clave del elemento div de cada pregunta en el índice i y hemos establecido el valor de cada botón de radio en answers[i] para que se muestre correctamente la respuesta seleccionada para cada pregunta.

    Con estas modificaciones, cada respuesta de botón de radio ahora está identificada de manera única por el índice de su pregunta correspondiente, y cambiar la respuesta para una pregunta no afecta las respuestas para otras preguntas.

Comments are closed.