react-day-picker disabledDays 点击仍然触发 onDayClick

Question

所以我希望在提供一些日期作为 disabledDays 属性时禁用相关元素 onClick 处理程序。在我看来，react-day-picker 仅更改元素的 css。这对我来说似乎很模糊，所以我怀疑我的实现有问题。

阅读 https://react-day-picker.js.org/examples/disabled/ 似乎可以确认它仅使用 CSS 设置样式。我将如何实现有条件地禁用特定日期，它会在 onDayClick 中完成吗？这似乎是一个不合适的解决方案。

import React, { useState } from "react";
import "./styles.css";
import DayPicker from "react-day-picker";
import "react-day-picker/lib/style.css";

export default () => {
  const [date, setDate] = useState(undefined);

  let disabledDays = [
    new Date("2020/09/12"),
    new Date("2020/09/13"),
    new Date("2020/09/16")
  ];

  const modifiers = {
    "specific-disabled": [...disabledDays]
  };

  disabledDays.push({ before: new Date() });

  const disabledStyle = `.DayPicker-Day--specific-disabled {
      color: white;
      background-color: #FFCCCB;
      cursor: default;
    }`;

  const onDayClick = (day, { selected }) => {
    let date = selected ? undefined : day;
    console.log(`clicked on ${date}`);
    setStartDate(date);
  };

  return (
    <div>
      <style>{disabledStyle}</style>
      <DayPicker
        modifiers={modifiers}
        showWeekNumbers
        selectedDays={date}
        onDayClick={onDayClick}
        disabledDays={disabledDays}
      />
    </div>
  );
};

Answer 1

根据 react-day-picker 文档，它不会禁用点击事件。但实际上您可以使用 pointer-events: none; 实现“禁用”行为。更多信息在这里：https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events

const disabledStyle = `.DayPicker-Day--specific-disabled {
      color: white;
      background-color: #FFCCCB;
      cursor: default;
      pointer-events: none;//this will disable mouse event

    }`;

Answer 2

您可以从 modifiers.

中获取 disabled 属性

  const onDayClick = (day, { selected, disabled }) => {
    if (!disabled) {
      let date = selected ? undefined : day;
      console.log(`clicked on ${date}`);
      setStartDate(date);
    }
  };

react-day-picker disabledDays 点击仍然触发 onDayClick

react-day-picker disabledDays clicks still trigger onDayClick

javascript

reactjs

react-day-picker