如何更改 - 單選按鈕 antd

Question

我有問題 arr 和 foreche 問題，我想呈現問題和 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>) 
 })}

Answer 1

您必須創建一個 state 數組或為單選按鈕創建一個子組件以擁有自己的 state：

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