NextJS中flowbite-react Datepicker选中值获取：事件Props失效

问题原因 #

• 你使用的flowbite-react@0.6.0版本中，Datepicker的事件回调参数并非浏览器事件对象，而是直接返回选中的日期值，此前写法的参数接收逻辑错误导致无响应。
• onSelectedDateChanged是更高版本flowbite-react新增的属性，0.6.0版本尚未支持，因此会触发类型错误。

正确实现方式 #

非受控组件（直接获取选中值） #

import { Datepicker } from "flowbite-react";

export default function ExampleComp(){
  return (
    <Datepicker
      onChange={(selectedDate) => {
        // selectedDate 类型为 Date | null
        console.log("选中的日期:", selectedDate);
      }}
    />
  )
}

受控组件（结合状态管理） #

如果需要手动控制日期值，可以配合React状态使用：

import { useState } from "react";
import { Datepicker } from "flowbite-react";

export default function ExampleComp(){
  const [selectedDate, setSelectedDate] = useState<Date | null>(null);

  return (
    <Datepicker
      selectedDate={selectedDate}
      onChange={(date) => {
        setSelectedDate(date);
        console.log("选中的日期:", date);
      }}
    />
  )
}

额外说明 #

• 若需要使用onSelectedDateChanged这类新增属性，需升级flowbite-react到支持该属性的版本（如^0.7.0及以上），升级前注意检查版本兼容性，避免其他组件出现异常。
• 当前flowbite@1.8.1与flowbite-react@0.6.0版本兼容，无需调整基础依赖版本。

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