背景： umi4 + antd pro component
功能：在选择器下拉框中实现可以通过时间来搜索
问题： select下拉框本质上是一个浮层，点击浮层以外的东西，浮层就会自动关闭（这也是组件封装的好处之一）；我通过popupRender（菜单扩展）内嵌的日期选择器<RangePicker /> 点开后也是一个浮层， 此浮层是另一个图层，点击此浮层原本的选择器就会关了；如图所示：

查了很多资料，几乎都是自己写一个这种说法，最终还是在DeepSeek这里得到了最终解决方法：通过select和datePicker的onOpenChange手动设置浮层开关， 以下是

具体实现方法 代码：

// txt select 根据时间搜索文件
const [selectTxtOpen, setSelectTxtOpen] = useState(false); // 展示txt文件下拉菜单
const [timePickerOpen, setTimePickerOpen] = useState(false); // 展示时间选择器
const [searchTxtbtn, setSearchTxtbtn] = useState(false); // tag-时间搜索是否完成-住选择器是否能关闭
const [beginTime, setBeginTime] = useState(dayjs().subtract(1, 'day').valueOf()); // 开始时间
const [endTime, setEndTime] = useState(dayjs().valueOf()); // 结束时间
const [fileName, setFileName] = useState(''); // 文件名

 // 选择txt文件变更事件
const selectTxtOnchange = (value, option) => {
  // 选择器已经选完值了
  setTxtFileId(value); // 后端要传的值
  let label = value ? option.label : ''; // 文件名
  setFileName(label); // 文件名 接口需要
  setSearchTxtbtn(true); // tag 两个选择器都可以关闭的tag
  setSelectTxtOpen(false); // 关闭主选择器
};

 // 日期选择器 -txt
  const datePickerOnChange = (date, dateString) => {
    let beginTime = dateString[0] ? date[0].valueOf() : null;
    let endTime = dateString[1] ? date[1].valueOf() : null;
    setBeginTime(beginTime);
    setEndTime(endTime);
  };

<ProFormSelect
  label="选择文件(txt)"
  required
  showSearch
  allowClear
  placeholder={'输入上传文件名查询选择已上传文件'}
  options={txtFileOption}
  onChange={selectTxtOnchange}
  fieldProps={{
    open: selectTxtOpen,  // 关键添加 - 1
    onOpenChange: (open) => {
      if (selectTxtDisabled) return;
      if (timePickerOpen && !open) return;
      if (!searchTxtbtn && !open) return;
      // searchFile(1, '',null,null);
      setSearchTxtbtn(false);
      setSelectTxtOpen(open);
    }, // 关键添加 - 2
    popupRender: (menu) => (
      <>
        {menu}
        <Divider
          style={{
            margin: '8px 0',
            color: '#a1a1a1',
            fontSize: '14px',
            marginTop: 15,
          }}
        >
          忘记文件名 ? 来此根据时间搜索
        </Divider>
        <Space style={{ marginBottom: 15, marginLeft: 15 }}>
          <RangePicker
            style={{ minWidth: '300px' }}
            presets={rangePresets}
            defaultValue={[dayjs().subtract(1, 'day'), dayjs()]}
            onChange={datePickerOnChange}
            maxDate={dayjs()}
            onOpenChange={(open) => {
              setTimePickerOpen(open);
              if (open) setSelectTxtOpen(true); // 时间选择器打开时保持主选择器开启
              // 关闭时间选择器后关闭主选择器
              if (!open && searchTxtbtn)
                setTimeout(() => setSelectTxtOpen(true), 100);
            }} // 关键添加 - 3
          />
          <Button
            type="primary"
            onClick={ () => searchFile(1, fileName, beginTime, endTime)}
            style={{ marginLeft: 15 }}
          >
            搜索
          </Button>
          <Button
            type="primary"
            onClick={() => {
              setSearchTxtbtn(true); 
              setSelectTxtOpen(false);
            }} // 关键添加 - 4
            style={{ marginLeft: 15 }}
          >
            取消
          </Button>
        </Space>
      </>
    ),
    onSearch: onSearchTxtHandler,
  }}
/>

截图可能更清晰一些：

最终效果展示