如何在react-rainbow DateTimePicker操作按钮点击时调用自定义函数

由于react-rainbow-components的DateTimePicker组件没有直接提供确定/取消按钮的回调属性，你可以通过以下两种方案实现需求：

方案一：通过Ref监听弹窗按钮点击 #

利用React的useRef获取DateTimePicker的DOM元素，监听弹窗内确定、取消按钮的点击事件：

import { DateTimePicker } from "react-rainbow-components";
import { useState, useRef, useEffect } from "react";

export default function App() {
  const [selectedDate, setSelectedDate] = useState(new Date());
  const datePickerRef = useRef(null);

  const handleOkClick = () => {
    console.log("点击了确定按钮");
    // 此处编写自定义逻辑
  };

  const handleCancelClick = () => {
    console.log("点击了取消按钮");
    // 此处编写自定义逻辑
  };

  useEffect(() => {
    const modalElement = datePickerRef.current?.querySelector(".rainbow-modal");
    if (!modalElement) return;

    const handleButtonClick = (e) => {
      const button = e.target.closest("button");
      if (!button) return;

      // 根据按钮文本判断操作，若组件使用中文则改为“确定”“取消”
      if (button.textContent.trim() === "OK") {
        handleOkClick();
      } else if (button.textContent.trim() === "Cancel") {
        handleCancelClick();
      }
    };

    modalElement.addEventListener("click", handleButtonClick);
    return () => {
      modalElement.removeEventListener("click", handleButtonClick);
    };
  }, []);

  return (
    <div className="App">
      <DateTimePicker
        ref={datePickerRef}
        value={selectedDate}
        minDate={new Date(2022, 0, 4)}
        maxDate={new Date()}
        label="DateTimePicker Label"
        onChange={(value) => setSelectedDate(value)}
      />
    </div>
  );
}

注意：如果你的项目对DateTimePicker做了本地化处理（比如按钮显示中文），需要修改判断按钮文本的条件。

方案二：通过状态变化与onBlur区分操作类型 #

点击确定按钮时，onChange会先触发更新日期状态，随后弹窗关闭触发onBlur；点击取消按钮时，onChange不会触发，仅onBlur触发。通过对比日期状态的变化即可区分两种操作：

import { DateTimePicker } from "react-rainbow-components";
import { useState, useRef } from "react";

export default function App() {
  const [selectedDate, setSelectedDate] = useState(new Date());
  const prevDateRef = useRef(selectedDate);

  const handleOk = () => {
    console.log("点击了确定按钮，新日期：", selectedDate);
    // 此处编写自定义逻辑
  };

  const handleCancel = () => {
    console.log("点击了取消按钮，日期未变更");
    // 此处编写自定义逻辑
  };

  const handleChange = (value) => {
    prevDateRef.current = selectedDate;
    setSelectedDate(value);
  };

  const handleBlur = () => {
    if (selectedDate.getTime() !== prevDateRef.current.getTime()) {
      handleOk();
    } else {
      handleCancel();
    }
  };

  return (
    <div className="App">
      <DateTimePicker
        value={selectedDate}
        minDate={new Date(2022, 0, 4)}
        maxDate={new Date()}
        label="DateTimePicker Label"
        onChange={handleChange}
        onBlur={handleBlur}
      />
    </div>
  );
}

这种方案无需操作DOM，但需要注意：若用户选择日期后直接点击弹窗外部关闭，也会被判定为“取消”操作，这通常符合业务预期。

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