antd 表单字段不会为复选框重置

Question

我有一个由输入和复选框组成的 antd 表单。

antd : 4.16.0 反应：17.0.2

使用后，

this.formRef.current.resetFields();

输入字段正在重置，但复选框未重置。

示例代码：

<Form
            layout="vertical"
            hideRequiredMark
            initialValues={{
              sunH: [
                moment("00:00", "HH:mm"),
                moment("00:00", "HH:mm"),
              ],
              monH: [
                moment("00:00", "HH:mm"),
                moment("00:00", "HH:mm"),
              ],
            }}
            ref={this.props.formRef}
          >
            <Row gutter={16}>
              <Col span={12}>
                <Form.Item
                  name="pName"
                  label="Name"
                  rules={[
                    {
                      required: true,
                      message: "Please enter Name",
                    },
                  ]}
                >
                  <Input placeholder="Enter name" />
                </Form.Item>

    <Form.Item name="Mon" label="" valuePropName="checked">
                          <Text>Mon</Text>
                        </Form.Item>
              </Col>
            </Row>
          </Form>

表单接受一个 onCancel 属性，所以 onCancel，

this.formRef.current.resetFields();

this.formRef.current 的日志：

Answer 1

您可以在该函数中手动设置单选字段值为 null ...
您所要做的就是...

            formRef.setFieldsValue(['label_name(Mon)'] : undefined)

如果您无法使用上面的代码进行更改，请尝试 formRef.current.setFieldsValue。
对于功能组件，您必须采用使用 useForm() 绑定的表单引用，并且必须调用相同的 setfield 方法。

form.setFieldsValue(['label_name(Mon)'] : undefined )

Answer 2

ant.design/components/form/#components-form-demo-nest-messages检查第二个例子，他们已经很好地解释了你需要的一切

https://codesandbox.io/s/form-methods-antd-4-17-0-alpha-7-forked-ff1uf?file=/index.js:0-2953

使用复选框检查这个工作示例

import React from "react";
import ReactDOM from "react-dom";
import "antd/dist/antd.css";
import "./index.css";
import { Form, Input, Button, Select, Checkbox } from "antd";
const { Option } = Select;
const layout = {
  labelCol: {
    span: 8
  },
  wrapperCol: {
    span: 16
  }
};
const tailLayout = {
  wrapperCol: {
    offset: 8,
    span: 16
  }
};

const Demo = () => {
  const [form] = Form.useForm();

  const onGenderChange = (value) => {
    switch (value) {
      case "male":
        form.setFieldsValue({
          note: "Hi, man!"
        });
        return;

      case "female":
        form.setFieldsValue({
          note: "Hi, lady!"
        });
        return;

      case "other":
        form.setFieldsValue({
          note: "Hi there!"
        });
    }
  };

  const onFinish = (values) => {
    console.log(values);
  };

  const onReset = () => {
    form.resetFields();
  };

  const onFill = () => {
    form.setFieldsValue({
      note: "Hello world!",
      gender: "male"
    });
  };

  return (
    <Form {...layout} form={form} name="control-hooks" onFinish={onFinish}>
      <Form.Item
        name="note"
        label="Note"
        rules={[
          {
            required: true
          }
        ]}
      >
        <Input />
      </Form.Item>
      <Form.Item
        name="gender"
        label="Gender"
        rules={[
          {
            required: true
          }
        ]}
      >
        <Select
          placeholder="Select a option and change input text above"
          onChange={onGenderChange}
          allowClear
        >
          <Option value="male">male</Option>
          <Option value="female">female</Option>
          <Option value="other">other</Option>
        </Select>
      </Form.Item>
      <Form.Item
        noStyle
        shouldUpdate={(prevValues, currentValues) =>
          prevValues.gender !== currentValues.gender
        }
      >
        {({ getFieldValue }) =>
          getFieldValue("gender") === "other" ? (
            <Form.Item
              name="customizeGender"
              label="Customize Gender"
              rules={[
                {
                  required: true
                }
              ]}
            >
              <Input />
            </Form.Item>
          ) : null
        }
      </Form.Item>
      <Form.Item
        name="remember"
        valuePropName="checked"
        wrapperCol={{
          offset: 8,
          span: 16
        }}
      >
        <Checkbox>Remember me</Checkbox>
      </Form.Item>
      <Form.Item {...tailLayout}>
        <Button type="primary" htmlType="submit">
          Submit
        </Button>
        <Button htmlType="button" onClick={onReset}>
          Reset
        </Button>
        <Button type="link" htmlType="button" onClick={onFill}>
          Fill form
        </Button>
      </Form.Item>
    </Form>
  );
};

antd 表单字段不会为复选框重置

antd form field is not resetting for checkboxes

reactjs

antd