如何在MUI Select下拉框点击自定义项时弹出日期范围选择器

• 错误将DateRangePicker直接嵌入Select下拉菜单的MenuItem同级节点：Select下拉容器默认自带点击外部关闭逻辑、且设置了overflow: hidden样式，嵌入的日期选择器会被裁剪、随下拉关闭直接消失，无法正常交互
• 选中「自定义」选项后无触发弹窗的逻辑，预留的Grid节点未挂载实际日期选择组件
• 自定义日期状态与表单字段未打通，选中自定义日期后Select无对应显示文本，提交逻辑也无法拿到正确的日期范围

首先整理基础选项配置，移除原来选项渲染中嵌入的日期选择器逻辑：

// 有效期选项配置，单独抽离不用写在渲染函数里
const expirationOptions = [
  { id: "1", name: "7天", value: 7 },
  { id: "2", name: "14天", value: 14 },
  { id: "3", name: "30天", value: 30 },
  { id: "5", name: "自定义", value: "custom" }
];

在组件内补充日期弹窗相关状态：

import { useState } from 'react';
// 控制日期范围选择器显隐
const [datePickerOpen, setDatePickerOpen] = useState(false);
// 存储自定义选择的日期范围
const [customDateRange, setCustomDateRange] = useState(null);

调整Select与Controller的绑定逻辑，日期选择器独立放在Select外部：

<Box sx={{ pb: "1rem" }}>
  <Controller
    control={control}
    name="expirations"
    defaultValue={7}
    render={({ field: { onChange, value } }) => (
      <>
        <Select
          size="small"
          IconComponent={KeyboardArrowDownIcon}
          value={value}
          style={{ backgroundColor: "#F7F8FA" }}
          sx={{ input: { backgroundColor: "#F7F8FA" }, width: "100%" }}
          // 自定义选中态文本，适配自定义日期的显示
          renderValue={(selected) => {
            if (selected === "custom" && customDateRange) {
              // 这里按你项目用的日期库格式化即可，示例用dayjs
              return `${dayjs(customDateRange.start).format('YYYY-MM-DD')} 至 ${dayjs(customDateRange.end).format('YYYY-MM-DD')}`;
            }
            const matchedOption = expirationOptions.find(opt => opt.value === selected);
            return matchedOption?.name || "请选择有效期";
          }}
          onChange={(e) => {
            const selectedValue = e.target.value;
            if (selectedValue === "custom") {
              // 点击自定义时先打开日期选择器，不直接更新表单值
              setDatePickerOpen(true);
              return;
            }
            // 选中预设选项直接更新表单值，清空之前的自定义日期缓存
            onChange(selectedValue);
            setCustomDateRange(null);
          }}
        >
          {expirationOptions.map(option => (
            <MenuItem key={option.id} value={option.value}>
              {option.name}
            </MenuItem>
          ))}
        </Select>

        {/* 日期选择器独立挂载，不要放在Select下拉容器内部 */}
        <DateRangePicker
          open={datePickerOpen}
          dateRange={customDateRange}
          timePicker={15}
          onClose={() => setDatePickerOpen(false)}
          onChange={(range) => {
            setCustomDateRange(range);
            // 选完日期再更新表单值为custom
            onChange("custom");
            setDatePickerOpen(false);
          }}
          onCancel={() => setDatePickerOpen(false)}
        />
      </>
    )}
  />
</Box>

• 表单提交时判断expirations字段类型：如果是数字，直接取当前时间加对应天数计算有效期；如果值为custom，则从customDateRange中取用户选择的起止时间提交
• 日期选择器要支持取消操作，用户点取消时直接关闭弹窗，不修改原有选中值
• 若需要保留用户上次选择的自定义日期，只要不清空customDateRange状态，下次打开日期选择器时会自动带出之前的选择

如果页面空间足够，可以把三个预设有效期选项换成MUI的ToggleButtonGroup分段控件，和「自定义」按钮并排展示，用户不用点开下拉就能看到所有选项，交互路径更短，整体体验比下拉选择更好。

内容的提问来源于stack exchange，提问作者Thanzeer Salim