在Next.js中使用MUI DatePicker获取target.value时遇错误

错误原因 #

MUI DatePicker（搭配AdapterDayjs时）的onChange回调不会返回DOM事件对象，而是直接返回选中的dayjs日期实例。你用event.target.value去取值，自然会因event不存在或无对应属性报错。

修复方案 #

直接修改handleDateChange函数，接收日期实例作为参数即可：

修改后的状态与回调函数 #

import dayjs from 'dayjs';

// 建议初始化状态为dayjs实例或null，避免undefined带来的问题
const [date, setDate] = useState(null); 

const handleDateChange = (selectedDate) => {
  // 直接将选中的dayjs实例存入状态
  setDate(selectedDate);
  
  // 如果需要转为特定格式的字符串，比如YYYY-MM-DD：
  // const formattedDate = selectedDate?.format('YYYY-MM-DD');
  // setDate(formattedDate);
};

修改后的组件代码 #

<LocalizationProvider dateAdapter={AdapterDayjs}>
  <DatePicker
    className={Turn.picker}
    defaultValue={date}
    InputProps={{ endAdornment: <CustomIconButton /> }}
    onChange={handleDateChange}
  />
</LocalizationProvider>

额外说明 #

• 如果业务需要存储字符串格式的日期，记得用dayjs的format方法转换，不要沿用DOM事件的取值逻辑
• 初始化状态时尽量避免undefined，用null或dayjs()（当前日期）更稳妥

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