前言

小白使用 antd 的组件学习前端,遇到使用 Form 表单中的 radio.group的几个问题,最终解决了,特此记录一下,希望能帮助到需要的朋友。
官网链接
使用的表单样式如下:
在这里插入图片描述

需求

  1. 给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>

在这里插入图片描述

  1. 根据父组件传的值 修改 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()

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐