React：检测子日期选择器库调用以触发父组件toggle函数

情况1：DropdownParent是你自定义的组件 #

如果DropdownParent是自己开发的组件，最直接的方式是通过React.cloneElement增强DatePicker的onChange回调，在原有逻辑执行后调用DropdownParent内部的toggle函数。

实现代码 #

// DropdownParent 组件
import React from 'react';

const DropdownParent = ({ children }) => {
  // 你的toggle函数逻辑
  const toggle = () => {
    console.log('触发DropdownParent的toggle');
    // 这里写关闭/切换下拉框的实际代码
  };

  // 增强子组件的onChange回调
  const enhancedDatePicker = React.cloneElement(children, {
    onChange: (date) => {
      // 先执行DatePicker原有onChange逻辑
      children.props.onChange(date);
      // 调用DropdownParent的toggle函数
      toggle();
    }
  });

  return (
    <div className="dropdown-container">
      {enhancedDatePicker}
    </div>
  );
};

// 使用DropdownParent的页面组件
const YourPage = () => {
  const [startDate, setStartDate] = useState(null);
  const [endDate, setEndDate] = useState(null);

  const handleChange = ({ startDateObj }) => {
    // 原有日期处理逻辑
    setStartDate(startDateObj);
  };

  return (
    <DropdownParent>
      <DatePicker
        selectsStart
        showYearDropdown
        showMonthDropdown
        endDate={endDate}
        selected={startDate}
        scrollableYearDropdown
        dateFormat="dd/MM/yyyy"
        startDate={startDate}
        yearDropdownItemNumber={10}
        onChange={(date) => handleChange({ startDateObj: date })}
        placeholderText="选择开始日期"
        inline
        locale="en-gb"
      />
    </DropdownParent>
  );
};

情况2：DropdownParent是第三方组件 #

如果DropdownParent是第三方库提供的，优先查看它的官方文档，确认是否支持以下两种方式：

方式A：通过Ref调用toggle方法 #

如果第三方组件支持通过ref暴露内部方法，直接创建ref绑定到DropdownParent，然后在DatePicker的onChange中调用：

import { useRef, useState } from 'react';

const YourPage = () => {
  const dropdownRef = useRef(null);
  const [startDate, setStartDate] = useState(null);
  const [endDate, setEndDate] = useState(null);

  const handleChange = ({ startDateObj }) => {
    setStartDate(startDateObj);
    // 调用DropdownParent的toggle方法（需确保组件ref暴露了该方法）
    dropdownRef.current?.toggle();
  };

  return (
    <DropdownParent ref={dropdownRef}>
      <DatePicker
        selectsStart
        showYearDropdown
        showMonthDropdown
        endDate={endDate}
        selected={startDate}
        scrollableYearDropdown
        dateFormat="dd/MM/yyyy"
        startDate={startDate}
        yearDropdownItemNumber={10}
        onChange={(date) => handleChange({ startDateObj: date })}
        placeholderText="选择开始日期"
        inline
        locale="en-gb"
      />
    </DropdownParent>
  );
};

方式B：利用第三方组件的回调属性 #

如果第三方DropdownParent提供了类似onSelect、onCloseTrigger这类回调属性，可以直接把toggle逻辑绑定到这些属性上，或者在DatePicker的onChange中触发这些回调。

关键注意点 #

• 如果用React.cloneElement，要确保DropdownParent的子元素是单个React组件（这里就是DatePicker），如果是多个子元素需要遍历处理。
• 第三方组件的ref调用需要确认组件是否用forwardRef包裹，否则无法获取内部方法。

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