如何设置Radio.Group Antd勾选？

Question

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

有一个活动无线电的 ID，它也是动态生成的。

如何比较 id 并安装与 Radio.Group 的检查。 最后我需要获取表单中的单选值 此代码无法正常工作。

动态数据可能会更大

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"));

Answer 2

现在可能不相关，但是可以通过将默认值应用于 Radio.Group 来修复此问题。在这里查看更多详细信息https://ant.design/components/radio

<Radio.Group defaultValue={'no'}>
   <Radio value={'yes'}>Yes</Radio>
   <Radio value={'no'}>No</Radio>
 </Radio.Group>