如何更改 - 单选按钮 antd答案

【问题标题】：how to on change -radio button antd如何更改 - 单选按钮 antd
【发布时间】：2022-01-07 03:34:06
【问题描述】：

我有问题 arr 和 foreche question 我想呈现问题和 antd 单选按钮答案。

问题是，当我更改任何问题时，所有答案都会更改为我在第一个问题中更改的相同答案。有什么方法可以对单选按钮执行键或 id 并通过该键进行更改，或任何帮助？这是我的代码：

 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>) 
 })}

【问题讨论】：

标签： javascript reactjs radio-button antd

【解决方案1】：

您必须创建一个数组状态或创建一个单选按钮的子组件才能拥有自己的状态：

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

const onChange = (e, i) => {
    setValue(prevState => {
        const newState = [...prevState]; 
        newState[i] = e.target.value;
        return newState;
    });
};

{questions.map((question, i) => {                     
    return (<div><div>{question.Description}</div>
        <Radio.Group value={value[i]} onChange={e => onChange(e,i)} >
             <Radio value={1}>Aי</Radio>
             <Radio value={2}>B</Radio>
             <Radio value={3}>C</Radio>
        </Radio.Group></div>) 
})}

【讨论】：