React DatePicker选择日期后无法关闭问题求助

核心问题 #

通过按钮触发打开react-datepicker，选中日期后组件未自动关闭，且onChange事件未正确触发，需手动点击按钮关闭。

修复步骤 #

1. 控制日期选择器的显示状态 #

在组件内添加状态变量管理选择器的显示/隐藏：

import { useState } from 'react';
import { useForm } from 'react-hook-form';
import ReactDatePicker from 'react-datepicker';
import 'react-datepicker/dist/react-datepicker.css';

const DatePickerComponent = () => {
  const { register, setValue, watch } = useForm();
  // 管理日期选择器的显示状态
  const [isPickerOpen, setIsPickerOpen] = useState(false);
  const selectedDate = watch('date');

  return (
    <div>
      {/* 触发按钮 */}
      <button onClick={() => setIsPickerOpen(!isPickerOpen)}>
        {selectedDate ? selectedDate.toLocaleDateString() : '选择日期'}
      </button>

      {/* 日期选择器组件 */}
      <ReactDatePicker
        open={isPickerOpen}
        selected={selectedDate}
        // 选中日期时更新表单值并关闭选择器
        onChange={(date) => {
          setValue('date', date);
          setIsPickerOpen(false);
        }}
        // 点击外部区域时关闭选择器（可选优化）
        onClickOutside={() => setIsPickerOpen(false)}
      />
    </div>
  );
};

export default DatePickerComponent;

2. 确保react-hook-form状态同步 #

• 使用setValue将选中的日期同步到react-hook-form的表单状态中
• 通过watch获取当前表单的日期值，传递给react-datepicker的selected属性，确保选中状态正确关联

3. 可选优化：外部点击关闭逻辑 #

通过onClickOutside属性实现点击选择器外部区域时自动关闭组件，提升交互体验。

关键注意点 #

• 必须将open属性与状态变量绑定，确保选择器的显示状态完全由代码控制
• onChange事件需同时完成表单值更新和关闭状态设置，缺一不可
• 确认已正确引入react-datepicker的样式文件，避免组件显示异常

内容的提问来源于stack exchange，提问作者Deepak Negi