React项目中react-datepicker触发onChange时e.target.name为undefined的解决方法

• react-datepicker 组件的 onChange 回调默认返回的是选中的日期对象，不是原生 DOM 事件对象，你原有逻辑里读取 e.target.name 自然找不到对应属性
• 你在给 onChange 传参时，name 赋值的是 startDate 变量（初始值为空字符串），不是你要的字段名字符串 'startDate'，所以打印出来的 name 是 undefined

方案1：调整传参结构兼容原有onChange逻辑 #

你只需要修改DatePicker组件的onChange调用，传递符合你现有函数预期的结构，同时把name改成正确的字符串：

<DatePicker
  isClearable
  filterDate={(d) => {return new Date() > d}}
  placeholderText="Select Start Date"
  dateFormat="MMMM yyyy"
  selected={startDate}
  selectsStart
  startDate={startDate}
  endDate={endDate}
  // 这里构造和原生事件一致的结构，name写死为字符串'startDate'
  onChange={(date) => onChange({ target: { name: 'startDate', value: date } })}
/>

对应结束日期的DatePicker同理，把name改成'endDate'即可，原有onChange函数不需要做任何修改。

方案2：单独封装日期选择的处理逻辑（更推荐） #

不用模拟事件对象，直接写专门处理日期修改的函数，逻辑更清晰不易出错：

// 新增专门处理日期变更的函数
const handleDateChange = (fieldName, date) => {
  setFormData({ ...formData, [fieldName]: date })
}

DatePicker组件的onChange改成调用这个新函数：

<DatePicker
  // 其他属性保持不变
  onChange={(date) => handleDateChange('startDate', date)}
/>

结束日期的选择器调用时传入'endDate'即可。

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