react-calender组件onBlur事件中event.target.value为空的原因咨询

这种情况我之前也踩过坑，主要是两个核心原因导致的：

1. React合成事件的池化机制 #

React为了优化性能，会对合成事件进行池化处理——事件对象在回调执行完毕后会被重置，属性值会被清空。虽然你同步打印event.target时能看到value字段，但当你单独访问event.target.value时，事件对象可能已经被回收，导致拿到空值。

你可以试试在回调里先调用event.persist()来验证这个问题，它会把事件对象从池中取出，避免被自动重置：

const handleBlur = (event) => {
  event.persist(); // 阻止事件对象被池化回收
  console.log("event.target.value", event.target.value);
};

2. react-calender组件的内部实现逻辑 #

react-calender的输入框是组件内部维护的受控元素，它的value并非和用户选中的日期实时绑定。当onBlur触发时，组件可能正处于状态更新的间隙：要么输入框的value还没完成同步，要么组件已经开始清理临时输入值，这时候通过target拿值自然会为空。

更可靠的解决方案： #

不要依赖onBlur事件的target来获取日期，而是通过组件的onChange事件先把选中的日期保存到你的组件状态中，在onBlur时直接使用这个状态值：

import { useState } from 'react';
import Calendar from 'react-calendar';

function MyCalendar() {
  const [selectedDate, setSelectedDate] = useState(null);

  const handleChange = (date) => {
    setSelectedDate(date);
  };

  const handleBlur = () => {
    // 直接使用保存的日期状态
    console.log("选中的日期：", selectedDate);
    // 如果需要转成字符串格式
    if (selectedDate) {
      const dateStr = selectedDate.toLocaleDateString();
      console.log("日期字符串：", dateStr);
    }
  };

  return (
    <Calendar
      onChange={handleChange}
      onBlur={handleBlur}
      value={selectedDate}
    />
  );
}

这种方式不仅能避开事件对象的坑，还能更精准地获取用户实际选中的日期——毕竟react-calender的核心交互就是通过onChange传递选中值，这也是官方推荐的用法。

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