react实现DatePicker日期选择框清空

在React中使用DatePicker日期选择框时，可以通过以下方式实现清空功能：

1. 使用受控组件

在React中，可以通过使用受控组件的方式来实现对表单元素的控制。对于DatePicker日期选择框，可以将其值绑定到组件的状态state中，然后在清空按钮的点击事件中将state重置为null或默认值。

示例代码：

import React, { useState } from 'react';
import DatePicker from 'react-datepicker';
import 'react-datepicker/dist/react-datepicker.css';

function App() {
  const [startDate, setStartDate] = useState(null);

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

  return (
    <>
      <DatePicker selected={startDate} onChange={date => setStartDate(date)} />
      <button onClick={handleClear}>清空</button>
    </>
  );
}

export default App;

2. 使用非受控组件

使用非受控组件的方式可以更加简单地实现DatePicker日期选择框的清空功能。在非受控组件中，可以直接通过ref获取DatePicker组件的实例，然后在清空按钮的点击事件中调用其clear方法清空日期。

示例代码：

import React, { useRef } from 'react';
import DatePicker from 'react-datepicker';
import 'react-datepicker/dist/react-datepicker.css';

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

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

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

export default App;

以上是两种实现DatePicker日期选择框清空功能的方法，可以根据实际需要选择适合自己的方式。