如何点击MuiDatePicker组件触发open属性以打开日期选择器

问题说明 #

我使用的MuiDatePicker组件无法接收onClick属性。我知晓需要传入一个open（布尔类型）prop来控制弹窗显示，但找不到点击组件（下图标注区域）时触发它的方法。

当前代码示例：

const DatePicker: FC<DatePickerProps> = ({ yearsPerRow = 3, ...props }) => {
return (
    <MuiDatePicker
        slotProps={{
            switchViewIcon: { sx: { display: 'none' } },
            openPickerIcon: {
                component: EventIcon,
                style: { fontSize: '16px' },
            },
        }}

        yearsPerRow={yearsPerRow}
        open={boolean} // 这个值需要由组件点击事件控制
        {...props}
    />
);
};

解决方案 #

要实现点击组件触发open状态切换，需通过受控模式配合useState管理弹窗状态，同时给触发区域添加点击事件：

• 用useState声明状态变量控制open值
• 给slotProps里的触发元素（打开图标/输入框）添加点击事件切换状态
• 监听onClose事件同步关闭状态

修改后的代码：

import { useState } from 'react';
import { MuiDatePicker } from '@mui/x-date-pickers/MuiDatePicker';
import EventIcon from '@mui/icons-material/Event';

const DatePicker: FC<DatePickerProps> = ({ yearsPerRow = 3, ...props }) => {
  // 声明受控状态，管理弹窗的打开/关闭
  const [isOpen, setIsOpen] = useState(false);

  return (
    <MuiDatePicker
      slotProps={{
        switchViewIcon: { sx: { display: 'none' } },
        openPickerIcon: {
          component: EventIcon,
          style: { fontSize: '16px' },
          // 点击图标切换弹窗状态
          onClick: () => setIsOpen(!isOpen),
        },
        textField: {
          // 可选：点击输入框区域也触发弹窗切换
          onClick: () => setIsOpen(!isOpen),
        },
      }}
      yearsPerRow={yearsPerRow}
      open={isOpen}
      // 弹窗关闭时同步更新状态
      onClose={() => setIsOpen(false)}
      {...props}
    />
  );
};

补充说明 #

• 如果只需要点击图标触发弹窗，仅保留openPickerIcon内的onClick即可
• 若需让输入框区域也能触发打开，保留textField的onClick配置
• 必须配置onClose事件，否则弹窗手动关闭后状态不会同步更新

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