javascript - How to set checked with Radio.Group Antd? - Stack Overflow

admin管理员组

文章数量:1328400

I have dynamic data that radio draw.

There is an id of an active radio, which also es dynamically.

How to pare id and install cheked with Radio.Group. And in the end I need to get the radio values in the form This code does not work correctly.

dynamiclyData could be much bigger

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

I have dynamic data that radio draw.

There is an id of an active radio, which also es dynamically.

How to pare id and install cheked with Radio.Group. And in the end I need to get the radio values in the form This code does not work correctly.

dynamiclyData could be much bigger

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

• javascript
• reactjs
• antd

Share Improve this question Follow asked Jul 15, 2020 at 9:55 JuniorrrrrJuniorrrrr 16922 gold badges44 silver badges1212 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

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

Might not be relevant now, but this can be fixed by applying the default value to Radio.Group. Check more details here https://ant.design/ponents/radio

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

本文标签： javascriptHow to set checked with RadioGroup AntdStack Overflow