重置 Radio.Group 值 onSubmit 点击 antd 库 [英] Reset Radio.Group values onSubmit click for antd library

问题描述

我正在使用 ant-design 库.有 useForm() 钩子来重置值.

I am using ant-design library. There is useForm() hook to reset values.

所有值都被重置为原始值，但不是 Radio.Group.

All values are being reset to original values but not for Radio.Group.

如何将我的单选按钮状态从 State 重置为 priority 值?

How do I reset my radio button state to priority value from State?

  const [priority, setPriority] = useState(2);
 const [form] = Form.useForm();

const onSubmit = (values) => {
    console.log('Received values of form: ', values);

    form.resetFields();
  }

<Form
          form={form}
          labelCol={{ span: 4 }}
          wrapperCol={{ span: 14 }}
          layout="horizontal"
          initialValues={{ size: "large" }}
          size={"large"}
          onFinish={onSubmit}
        >
          <Form.Item
            name="title"
            rules={[{ required: true, message: 'Title is required!' }]}
            label="Title">
            <Input placeholder="Title" />
          </Form.Item>
          <Form.Item
            name="content"
            rules={[{ required: true, message: 'Content is required!' }]}
            label="Content">
            <Input.TextArea placeholder="Content" />
          </Form.Item>
          <Form.Item label="Switch" name="switch">
            <Switch />
          </Form.Item>
          <Form.Item name="priority" label="Radio.Button">
            <Radio.Group defaultValue={priority}
              onChange={onPriorityChange}>
              <Radio.Button value={2}>High</Radio.Button>
              <Radio.Button value={1}>Medium</Radio.Button>
              <Radio.Button value={0}>Low</Radio.Button>
            </Radio.Group>
          </Form.Item>
          <Form.Item>
            <Button type="primary" htmlType="submit">
              Submit
        </Button>
          </Form.Item>
        </Form>

推荐答案

我为 initialValues 添加了优先级并且它起作用了.

I added priority to the initialValues and it worked.

参考这个.

https://codesandbox.io/s/优雅-agnesi-9vp4x?file=/src/App.js

这篇关于重置 Radio.Group 值 onSubmit 点击 antd 库的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！