为什么在 React-Day-Picker 中添加新组件后我的模式无法打开？

Question

我创建了一个日历，其中如果用户单击某个日期，它将打开一个模式，但是在

components

下添加

classNames

后，

openDialogBox

的功能不再起作用。

const LeftCalendar = ({ date, setDate }: Props) => {

  const user = useCurrentUser()
  const [open, setOpen] = useState<boolean>(false);

  const openDialogBox = (currentDate: Date | undefined) => {
    if (currentDate) {
      setDate(currentDate);
      setOpen(true);

    } else {
      setDate(currentDate);
      setOpen(false);
    }
  };

  const hasEvent = (date: Date) => {
    return events.some((event) => format(event.date, "yyyy-MM-dd") === format(date, "yyyy-MM-dd"))
  }

const handleClick = () => {
  console.log("Hello")
}
 
  return (

    <div className='flex flex-col  justify-center gap-y-2 h-full md:h-[800px]  relative'>
      <p className='text-lg text-left'> DATE TODAY: </p>
      <div className='flex flex-col'>
        <div className='w-full flex gap-x-2 p-4 rounded-full mb-8 border-2 text-xl font-semibold text-green-700'>
          <CalendarClock />
          <span className=''>{`${format(new Date(), 'MM/dd/yyyy')}`}</span>
        </div>


      </div>

      <div className='flex h-4/6 w-full items-center justify-center'>
        <Calendar
          mode="single"
          selected={date}
          onSelect={openDialogBox}
          //Change this according the user/ if admin, make
          //disabled={(date) => isBefore(new Date(date), startOfDay(new Date()))}
          disabled={user ? (date) => isBefore(new Date(date), startOfDay(new Date())) : (date) => new Date(date) <= new Date()}
          onDayClick={handleClick}
          className="shadow-lg p-6 border rounded-md h-full w-full flex "
          classNames={{
            months: "flex w-full flex-col sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0 flex-1",
            month: "space-y-4 w-full flex flex-col",
            table: "w-full h-full border-collapse space-y-1",
            head_row: "",
            head_cell: "text-muted-foreground rounded-md w-9 font-normal text-[0.8rem]",
            row: "w-full mt-2",
            day: "h-9 w-9 p-0 font-normal aria-selected:opacity-100",
            day_range_end: "day-range-end",
            day_selected:
              "bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground",
            day_today: "bg-accent text-accent-foreground",
            day_outside:
              "day-outside text-muted-foreground opacity-50 aria-selected:bg-accent/50 aria-selected:text-muted-foreground aria-selected:opacity-30",
            day_disabled: "text-muted-foreground opacity-50",
            day_range_middle: "aria-selected:bg-accent aria-selected:text-accent-foreground",
            day_hidden: "invisible",
            caption: "flex justify-center pt-1 relative items-center",
            caption_label: "text-sm font-medium",
            nav: "space-x-1 flex items-center",
            nav_button: "h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100",
            nav_button_previous: "absolute left-1",
            nav_button_next: "absolute right-1",
          }}
          components={{
            Day: ({ date: dayDate, displayMonth ...props }) => {
              const dateHasEvent = hasEvent(dayDate)
              return (
                <div className="relative">
                  <button
                    {...props}
                    className={`relative h-9 w-9  ${dateHasEvent ? 'bg-red-100 hover:bg-red-200' : ""} text-lg rounded-md p-0 font-normal hover:bg-accent hover:text-accent-foreground focus:bg-red-300/80 focus:text-accent-foreground`}
                  >
                    {format(dayDate, "d")}
                    {dateHasEvent && (
                      <div className="absolute bottom-1 right-1  h-1 w-1 -translate-x-1/2 rounded-full bg-red-600" />
                    )}
                  </button>
                </div>
              )
            },
          }}
        />
      </div>
      <CreateScheduleDialog open={open} setOpen={setOpen} pickedDate={date} />

    </div>

  )
}

Answer 1

1. 正确处理 onDayClick：它现在调用 openDialogBox(date) 以确保单击某一天时打开模式，而不是使用仅记录“Hello”的空 handleClick 函数。
2. 确保 onSelect 正确：onSelect={openDialogBox} 仍然有效，用于处理日历中的日期选择。
3. Day 按钮处理：在 Components.Day 属性中，我确保单击一天会触发 handleClick，后者又调用 openDialogBox 来打开模式。

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.3.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.3.1/umd/react-dom.production.min.js"></script>
const LeftCalendar = ({ date, setDate }: Props) => {
  const user = useCurrentUser();
  const [open, setOpen] = useState<boolean>(false);

  const openDialogBox = (currentDate: Date | undefined) => {
    if (currentDate) {
      setDate(currentDate);
      setOpen(true);
    } else {
      setDate(currentDate);
      setOpen(false);
    }
  };

  const hasEvent = (date: Date) => {
    return events.some((event) => format(event.date, "yyyy-MM-dd") === format(date, "yyyy-MM-dd"));
  };

  const handleClick = (date: Date) => {
    console.log("Date clicked: ", date);
    // You can add custom logic here if needed, but avoid overriding openDialogBox
    openDialogBox(date); // Make sure to call openDialogBox here if you want the modal to open
  };

  return (
    <div className='flex flex-col justify-center gap-y-2 h-full md:h-[800px] relative'>
      <p className='text-lg text-left'> DATE TODAY: </p>
      <div className='flex flex-col'>
        <div className='w-full flex gap-x-2 p-4 rounded-full mb-8 border-2 text-xl font-semibold text-green-700'>
          <CalendarClock />
          <span>{`${format(new Date(), 'MM/dd/yyyy')}`}</span>
        </div>
      </div>

      <div className='flex h-4/6 w-full items-center justify-center'>
        <Calendar
          mode="single"
          selected={date}
          onSelect={openDialogBox} // Ensure this is handling the date selection
          disabled={user ? (date) => isBefore(new Date(date), startOfDay(new Date())) : (date) => new Date(date) <= new Date()}
          onDayClick={handleClick} // Custom logic can go here, just make sure to call openDialogBox
          className="shadow-lg p-6 border rounded-md h-full w-full flex "
          classNames={{
            months: "flex w-full flex-col sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0 flex-1",
            month: "space-y-4 w-full flex flex-col",
            table: "w-full h-full border-collapse space-y-1",
            head_row: "",
            head_cell: "text-muted-foreground rounded-md w-9 font-normal text-[0.8rem]",
            row: "w-full mt-2",
            day: "h-9 w-9 p-0 font-normal aria-selected:opacity-100",
            day_range_end: "day-range-end",
            day_selected: "bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground",
            day_today: "bg-accent text-accent-foreground",
            day_outside: "day-outside text-muted-foreground opacity-50 aria-selected:bg-accent/50 aria-selected:text-muted-foreground aria-selected:opacity-30",
            day_disabled: "text-muted-foreground opacity-50",
            day_range_middle: "aria-selected:bg-accent aria-selected:text-accent-foreground",
            day_hidden: "invisible",
            caption: "flex justify-center pt-1 relative items-center",
            caption_label: "text-sm font-medium",
            nav: "space-x-1 flex items-center",
            nav_button: "h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100",
            nav_button_previous: "absolute left-1",
            nav_button_next: "absolute right-1",
          }}
          components={{
            Day: ({ date: dayDate, displayMonth, ...props }) => {
              const dateHasEvent = hasEvent(dayDate);
              return (
                <div className="relative">
                  <button
                    {...props}
                    className={`relative h-9 w-9 ${dateHasEvent ? 'bg-red-100 hover:bg-red-200' : ""} text-lg rounded-md p-0 font-normal hover:bg-accent hover:text-accent-foreground focus:bg-red-300/80 focus:text-accent-foreground`}
                    onClick={() => handleClick(dayDate)} // Call handleClick on day click
                  >
                    {format(dayDate, "d")}
                    {dateHasEvent && (
                      <div className="absolute bottom-1 right-1 h-1 w-1 -translate-x-1/2 rounded-full bg-red-600" />
                    )}
                  </button>
                </div>
              );
            },
          }}
        />
      </div>

      <CreateScheduleDialog open={open} setOpen={setOpen} pickedDate={date} />
    </div>
  );
};