如何设置与Radio.Group Antd的检查

Question

我有无线电绘制的动态数据。

有一个活动无线电的id，它也是动态的。

如何与Radio.Group比较id和安装。最后，我需要得到表格中的无线电值此代码无法正常工作。

动态数据可能更大

const dynamiclyData = [
{ id: 1, value: "A" },
{ id: 2, value: "B" },
{ id: 3, value: "C" },
{ id: 4, value: "D" }
];
const idChekedFromRequest = 2;
const App = () => (
<Form onFinish={val => console.log("val", val)}>
<Form.Item name="radio">
<Radio.Group name="radiogroup">
{dynamiclyData.map(({ value, id }) => {
return (
<Radio key={id} checked={id === idChekedFromRequest}>
{value}
</Radio>
);
})}
</Radio.Group>
<Button htmlType="submit">submit</Button>
</Form.Item>
</Form>
);

CodeSanbox

Answer 1

import React,{useState} from "react";
import ReactDOM from "react-dom";
import "antd/dist/antd.css";
import "./index.css";
import { Radio, Form, Button } from "antd";
const dynamiclyData = [
{ id: 1, value: "A" },
{ id: 2, value: "B" },
{ id: 3, value: "C" },
{ id: 4, value: "D" }
];
const App = () => {
const [idChekedFromRequest,setIdChekedFromRequest] = useState(2);
return (
<Form onFinish={val => console.log("val", val)}>
<Form.Item name="radio">
{/* <Radio.Group name="radiogroup"> */}
{dynamiclyData.map(({value, id}) => {
return (
<Radio key={id} onChange={()=>setIdChekedFromRequest(id)} checked={id===idChekedFromRequest}>
{value}
</Radio>
);
})}
{/* </Radio.Group> */}
<Button htmlType="submit">submit</Button>
</Form.Item>
</Form>
)
}
ReactDOM.render(<App />, document.getElementById("container"));