React中合并DatePicker onChange事件并传递值的实现方法

安全阿岳

2026-7-3

解决方案

核心修改思路

react-datepicker的onChange回调接收的是选中的Date对象而非普通DOM事件，所以需要在同一个处理函数里完成两项操作：更新本地日期状态，同时将格式化后的日期值同步到表单字段中。

具体代码修改

合并日期变更处理逻辑
创建一个自定义处理函数，替代原来两个独立的onChange事件：

const handleDateChange = (date) => {
  // 更新本地选中日期的状态
  setSelectedDaterow1(date);
  
  // 将Date对象格式化为后端需要的格式（示例保留YYYY-MM-DD部分，可按需调整）
  const formattedDate = date ? date.toISOString().split('T')[0] : '';
  
  // 调用表单字段更新函数，同步日期值到表单状态
  onFieldChange('existing_date', formattedDate);
};

更新DatePicker组件的onChange绑定
把原来的onChange替换为上面的自定义函数：

<DatePicker
  selected={selectedDaterow1}
  onChange={handleDateChange}
  dateFormat="yyyy-MM-dd" // 可选：设置前端展示的日期格式
  // 其他原有属性（如placeholder、minDate等）保持不变
/>

确保提交时数据正确传递
在handleSubmit中直接从表单状态（比如你维护的formats对象）中获取existing_date字段即可：

const handleSubmit = (e) => {
  e.preventDefault();
  
  // 构造提交给后端的请求数据
  const submitData = {
    ...formats, // 假设formats是你的表单状态对象，包含existing_date
    // 若需额外格式调整，可在此处补充处理
  };
  
  // 发送请求到后端
  fetch('/your-api-endpoint', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(submitData)
  })
  .then(res => res.json())
  .then(result => console.log('提交成功:', result))
  .catch(err => console.error('提交失败:', err));
};