如何更改单选按钮 antd
how to on change -radio button antd
我有问题 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>)
})}
您必须创建数组状态或为单选按钮创建子组件才能拥有自己的状态:
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>)
})}
我有问题 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>)
})}
您必须创建数组状态或为单选按钮创建子组件才能拥有自己的状态:
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>)
})}