react实现antd组件DatePicker日期选择框清空

antd的DatePicker组件也可以通过类似的方式实现清空功能。antd的DatePicker组件提供了一个allowClear属性，设置为true时就可以显示清空按钮。在清空按钮的点击事件中，可以将DatePicker组件的值设置为null或默认值。

示例代码：

import React, { useState } from 'react';
import { DatePicker } from 'antd';

function App() {
  const [date, setDate] = useState(null);

  const handleClear = () => {
    setDate(null);
  };

  return (
    <>
      <DatePicker value={date} onChange={value => setDate(value)} allowClear />
      <button onClick={handleClear}>清空</button>
    </>
  );
}

export default App;

在这个示例中，另一个需要注意的点是，antd的DatePicker组件的值是一个Moment.js对象，而不是一个Date对象。因此，在onChange事件中获取到的value是一个Moment.js对象。如果需要将其转换为Date对象，可以使用toDate方法，例如：value.toDate()。

另外，antd的DatePicker组件还提供了一个ref属性，可以通过获取到这个ref来调用DatePicker组件的方法，包括clear方法。使用方式与React中的示例类似。

示例代码：

import React, { useRef } from 'react';
import { DatePicker } from 'antd';

function App() {
  const datePickerRef = useRef(null);

  const handleClear = () => {
    datePickerRef.current.clear();
  };

  return (
    <>
      <DatePicker ref={datePickerRef} allowClear />
      <button onClick={handleClear}>清空</button>
    </>
  );
}

export default App;

以上是在React中使用antd的DatePicker组件实现清空功能的方法，可以根据实际需要选择适合自己的方式。