javascript - 如何使用 Radio.Group Antd 设置检查?
问题描述
我有无线电绘制的动态数据。
有一个活动无线电的 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>
);
解决方案
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"));
推荐阅读
- redis - 通过 Redis Cli 将一个数据库的所有键迁移到另一个数据库
- python - 如何将 csv 写入特定的共享点文件夹?
- visual-studio-code - vscode-remote-ssh 不适用于使用 Azure AD 身份验证的 SSH
- javascript - 如何访问json对象中的二级?
- c# - 将过滤器参数传递给 DBContext
- html - 如何使用 Typescript / React 使用 Tailwind 设计垂直进度条
- sdk - 使用 SDK 对 Blackmagic ATEM 进行编程
- linux - linux anaconda环境中的分段错误(核心转储)
- python - 组合一个组内的元素并使用 pandas 获得跨组的出现次数
- python - 在 redmine 中使用 python 脚本发布 REST api