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

大佬教程收集整理的这篇文章主要介绍了如何清除 Antd 表单中的 Datepicker 值？，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

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

如果在同一个 Form.Item 内触发按钮与 Datepicker 可以工作，但如果按钮在 datepicker 之外不会清除。

我基本上尝试在提交后清除 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

解决方法

form.resetFields();

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

大佬总结

以上是大佬教程为你收集整理的如何清除 Antd 表单中的 Datepicker 值？全部内容，希望文章能够帮你解决如何清除 Antd 表单中的 Datepicker 值？所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。