如何清空Antd Form中的Datepicker值？

Question

如果触发按钮在与日期选择器相同的 Form.Item 内，它可以工作，但如果按钮在日期选择器之外，则无法清除。

我基本上是尝试在提交后清除 Datepicker。

很奇怪，我无法理解这是 antd 错误还是我遗漏了什么？

 <Form
    form={form}
    name="advanced_assessment_form"
    onFinish={() => setIsClear(!isClear);}
  >
    <Form.Item
      name="field"
      rules={[
        {
          required: true,
          message: "Input something!"
        }
      ]}
    >
      <DatePicker
        name="datepicker"
        onChange={(val) => {
          setResponseDate(val);
        }}
        value={isClear ? null : responseDate}
      />
      {/* This Button works! */}
      {/* <Button htmlType="submit" onClick={onButton}>
        {" "}
        Clear Datepicker{" "}
      </Button> */}
    </Form.Item>
    <Form.Item>
      {/* This Button does not work */}
      <Button htmlType="submit" onClick={onButton}>
        {" "}
        Clear Datepicker{" "}
      </Button>
    </Form.Item>
  </Form>

这里是沙盒代码： CodeSandbox

Answer 1

我在 antd 表单上找到了解决方案 API。

只需调用以下函数即可帮助清除所有字段。

form.resetFields();

如果要为特定字段设置值；

form.setFieldsValue({field: '01/01/2021/, 'DD/MM/YYYY')})

干杯

如何清空Antd Form中的Datepicker值？

How to clear Datepicker value in Antd Form?

datepicker

reactjs

antd