如何使用 Radio.Group Antd 設置檢查？

Question

我有無線電繪制的動態數據。

有一個活動無線電的 id，它也是動態的。

如何使用 Radio.Group 比較 id 和安裝 cheked。 最后我需要以這種代碼無法正常工作的形式獲取單選值。

動態數據可能會更大

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

密碼箱

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