给 antd Form 中的 radio.group 设定默认值 、更改值
这里写自定义目录标题需求代码总结需求代码我们对Markdown编辑器进行了一些功能拓展与语法支持,除了标准的Markdown编辑器功能,我们增加了如下几点新功能,帮助你用它写博客:全新的界面设计 ,将会带来全新的写作体验;在创作中心设置你喜爱的代码高亮样式,Markdown 将代码片显示选择的高亮样式 进行展示;增加了 图片拖拽 功能,你可以将本地的图片直接拖拽到编辑区域直接展示;全新的 KaTe
·
前言
小白使用 antd 的组件学习前端,遇到使用 Form 表单中的 radio.group的几个问题,最终解决了,特此记录一下,希望能帮助到需要的朋友。
官网链接
使用的表单样式如下:
需求
- 给Antd Form表单中的 Radio.group 设置默认值
关键: 使用defaultValue
设置,比较简单,直接上代码
<Form.Item name="radio-group" label="Radio.Group">
<Radio.Group defaultValue={"b"}>
<Radio value="a">item 1</Radio>
<Radio value="b">item 2</Radio>
<Radio value="c">item 3</Radio>
</Radio.Group>
</Form.Item>
- 根据父组件传的值 修改 Radio.group 中的值
关键: 使用 Form.setFieldsValue()
设置表单的值
代码只展示 Radio 的部分 其他的省去
const Demo = (props) => {
const [form] = Form.useForm()
//可以将currentName 更改成父组件传过来的值 props.data
let currentName='a';
form.setFieldsValue({ "radio-group": currentName});
const onFinish = (values) => {
console.log("Received values of form: ", values);
};
return (
<Form
name="validate_other"
{...formItemLayout}
onFinish={onFinish}
form={form}
>
<Form.Item name="radio-group" label="Radio.Group">
<Radio.Group defaultValue={"b"}>
<Radio value="a">item 1</Radio>
<Radio value="b">item 2</Radio>
<Radio value="c">item 3</Radio>
</Radio.Group>
</Form.Item>
</Form>
);
};
不要忘记在Form组件中 写 form={form}
将属性值传递过去,否则会报如下错误
Warning: Instance created by `useForm` is not connected to any Form element. Forget to pass `form` prop?
总结
设置默认值 ,使用 defaultValue
更改为其他值 ,使用 Form.setFieldsValue()
更多推荐
已为社区贡献2条内容
所有评论(0)