如何清除 Antd 表单中的 Datepicker 值？

Question

如果触发按钮位于与 Datepicker 相同的 Form.Item 内，则它可以工作，但如果按钮位于 datepicker 外部则无法清除。

我基本上尝试在提交后清除日期选择器。

很奇怪，我不明白这是 antd bug 还是我错过了其他东西？

 <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>

这里是沙箱代码： 代码沙盒

Answer 1

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

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

form.resetFields();

如果您想为特定字段设置值；

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

欢呼的

Answer 2

如何设置干净/空白值？

我已经尝试过，但没有成功：

form.setFieldsValue({ 'my_field': dayjs(null, 'YYYY-MM-DD') }) 

form.setFieldsValue({ 'my_field': dayjs(undefined) })

form.setFieldsValue({ 'my_field': undefined })