如何通过Forward Ref调用正确方法打开MUI DatePicker？

你的问题在于调用了错误的方法，MUI DatePicker（来自@mui/x-date-pickers）并没有openCalendar方法，以下是两种可行的实现方式：

方案一：使用Ref调用内置方法 #

通过ref获取DatePicker实例，调用官方提供的openPicker()和closePicker()方法：

import { useRef } from 'react';
import { Box, IconButton, Typography } from '@mui/material';
import { LocalizationProvider, DatePicker } from '@mui/x-date-pickers';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import CalendarMonth from '@mui/icons-material/CalendarMonth';
import Close from '@mui/icons-material/Close';

export default function YourComponent() {
  const dateRef = useRef(null);

  return (
    <Box display={'flex'} justifyContent={'space-between'}>
      <LocalizationProvider dateAdapter={AdapterDayjs}>
        <DatePicker ref={dateRef} sx={{ display: 'none' }} />
      </LocalizationProvider>
      <Box sx={{ display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
        <Typography variant='h5' fontWeight={'bold'}>
          Calendar
        </Typography>
      </Box>
      <Box display={'flex'} gap={2}>
        <IconButton 
          onClick={() => dateRef.current?.openPicker()}
          sx={{ backgroundColor: '#D9D9D9', color: 'black' }}
        >
          <CalendarMonth />
        </IconButton>
        <IconButton 
          onClick={() => dateRef.current?.closePicker()}
          sx={{ backgroundColor: '#D9D9D9', color: 'black' }}
        >
          <Close />
        </IconButton>
      </Box>
    </Box>
  );
}

• 用?.可选链操作符可以避免组件未挂载时调用方法导致的报错
• 确保你的DatePicker是从@mui/x-date-pickers导入的，而非旧版的@mui/material

方案二：受控状态控制（推荐） #

通过React状态来控制DatePicker的open属性，更符合React数据流理念：

import { useState } from 'react';
import { Box, IconButton, Typography } from '@mui/material';
import { LocalizationProvider, DatePicker } from '@mui/x-date-pickers';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import CalendarMonth from '@mui/icons-material/CalendarMonth';
import Close from '@mui/icons-material/Close';

export default function YourComponent() {
  const [isPickerOpen, setIsPickerOpen] = useState(false);

  return (
    <Box display={'flex'} justifyContent={'space-between'}>
      <LocalizationProvider dateAdapter={AdapterDayjs}>
        <DatePicker 
          open={isPickerOpen}
          onClose={() => setIsPickerOpen(false)}
          sx={{ display: 'none' }} 
        />
      </LocalizationProvider>
      <Box sx={{ display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
        <Typography variant='h5' fontWeight={'bold'}>
          Calendar
        </Typography>
      </Box>
      <Box display={'flex'} gap={2}>
        <IconButton 
          onClick={() => setIsPickerOpen(true)}
          sx={{ backgroundColor: '#D9D9D9', color: 'black' }}
        >
          <CalendarMonth />
        </IconButton>
        <IconButton 
          onClick={() => setIsPickerOpen(false)}
          sx={{ backgroundColor: '#D9D9D9', color: 'black' }}
        >
          <Close />
        </IconButton>
      </Box>
    </Box>
  );
}

注意事项 #

如果还未安装依赖，需要执行以下命令安装必要包：

npm install @mui/x-date-pickers dayjs

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