cómo cambiar -botón de radio antd
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>)
})}
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:
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 adicionali
, que representa el índice de la pregunta cuya respuesta ha cambiado. Este valori
se utiliza para actualizar la matrizanswers
con la nueva respuesta seleccionada.Finalmente, en la función
map
, hemos establecido la clave del elemento div de cada pregunta en el índicei
y hemos establecido el valor de cada botón de radio enanswers[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.