React-Date-Picker实现Enter键触发日期变更而非onChange

你当前的思路方向是对的，但直接取event.target.value存在风险——输入框的字符串可能未经过组件的日期校验，手动解析容易出错。推荐通过组件实例获取已验证的日期值，具体调整如下：

步骤1：添加组件引用 #

用useRef获取DatePicker的实例，直接拿到组件内部维护的选中日期：

import { useRef } from 'react';
import DatePicker from 'react-date-picker';

const SearchDates = ({ onChangeDate, date }: Props) => {
  const datePickerRef = useRef<DatePicker>(null); // 新增ref

  // ... 其他代码
};

步骤2：修改onKeyDown逻辑 #

从ref中获取组件的value（已处理为Date对象），避免手动解析输入框字符串：

onKeyDown={(event) => {
  if (event.key === 'Enter') {
    event.preventDefault(); // 阻止默认行为（比如表单提交）
    const selectedDate = datePickerRef.current?.value;
    if (selectedDate) {
      onChangeDate(formatDate(selectedDate, fullDate));
    }
  }
}}

步骤3：绑定ref到DatePicker组件 #

<DatePicker
  ref={datePickerRef} // 绑定ref
  inputRef={(ref) => {
    inputs(ref);
  }}
  // 其他原有属性保持不变
/>

完整修改后的代码 #

import { useRef } from 'react';
import DatePicker from 'react-date-picker';

const SearchDates = ({ onChangeDate, date }: Props) => {
  const datePickerRef = useRef<DatePicker>(null);

  return (
      <div className={style.search}>
          <DatePicker
              ref={datePickerRef}
              inputRef={(ref) => {
                  inputs(ref);
              }}
              calendarClassName={'calendar'}
              format="dd-MM-yyyy"
              onKeyDown={(event) => {
                  if (event.key === 'Enter') {
                      event.preventDefault();
                      const selectedDate = datePickerRef.current?.value;
                      if (selectedDate) {
                          onChangeDate(formatDate(selectedDate, fullDate));
                      }
                  }
              }}
              shouldCloseCalendar={({ reason }) => reason !== 'select'}
              maxDate={new Date(futureYear(1))}
              minDate={new Date(futureYear(0))}
              locale={'ru-RU'}
              dayPlaceholder={'__'}
              monthPlaceholder={'__'}
              yearPlaceholder={'____'}
              clearIcon={date ? <ClearIndicatorIcon /> : null}
              calendarIcon={<CalendarIcon />}
              showNeighboringMonth={false}
              next2Label={null}
              prev2Label={null}
              prevLabel={<ArrowLeft />}
              nextLabel={<ArrowRight />}
              view={'month'}
              formatMonthYear={(locale: string | undefined, date: Date) => formatDate(date, MonthYear) as string}
              value={date ? (isNaN(Date.parse(date)) ? undefined : new Date(date)) : undefined}
          />
      </div>
  );
};

额外说明 #

• 这种方式拿到的selectedDate是组件已校验通过的Date对象，不会出现手动解析输入字符串导致的格式错误；
• 无论用户是手动输入日期还是通过日历面板选择，按Enter都能正确触发日期确认；
• event.preventDefault()可以避免页面刷新或表单默认提交等干扰行为。

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