next.js 在flowbite-react Datepicker组件中获取选定值- Props更改事件不工作

ulmd4ohb  于 2023-10-18  发布在  React
关注(0)|答案(1)|浏览(118)

flowbite-react库中获取Datepicker组件的选定值时遇到问题。使用NextJS
组件显示得很好。
我已经尝试了下面的代码,但在选择日期时不返回任何内容:

import { Datepicker } from "flowbite-react";

export default function ExampleComp(){
 return (
   <Datepicker
       onChange={(e) => console.log(e)} // not working
       onSelect={(e) => console.log(e)} // not working
       onInput={(e) => console.log(e)} // not working
       onSelectedDateChanged={(e) => console.log(e)} // Error: Does not exist on type 'IntrinsicAttributes & DatepickerProps'
      />
  )
}

在官方文档页面中没有具体的用例,但在storybook中有prop onSelectedDateChanged。我正在使用它,但Error: Does not exist on type 'IntrinsicAttributes & DatepickerProps
好心帮忙。
版本

  • “flowbite”:“^1.8.1”,
  • “flowbite-react”:“^0.6.0”,
  • “tailwindcss”:“3.3.3”,
  • “下一页”:“13.4.19”
hjqgdpho

hjqgdpho1#

onSelectedDateChanged对我来说很有用,它向这个props传递一个函数,并获得所需的输出,像这样从hook中使用它和react

<Controller name="date"
            control={control}
            rules={{ required: 'Date is required' }}
            render=
            {({ field }) => (
             <Datepicker
              value={field.value}
              onSelectedDateChanged={(date) => field.onChange(date)}
              dateFormat="yyyy-MM-dd"
              className="border rounded px-4 py-2 w-full" />
            )}
          />

对于常规使用,您可以使用useState,并使用此更新日期。

const handleDatePickerChange = (date) => {
    setSelectedDate(date);
    console.log(date);
  };

<Datepicker name="selectedDate" value={selectedDate}
            onSelectedDateChanged={handleDatePickerChange} />

相关问题