React+MUI点击图标打开DatePicker时anchorEl无效警告的解决方法

问题根源 #

该警告是因为DatePicker无法正确获取弹窗的锚点元素（anchorEl），核心原因是自定义TextField组件的ref传递逻辑错误，加上renderInput中ref的重复/错误赋值，导致DatePicker无法定位到触发弹窗的输入框元素。

具体修复步骤 #

1. 修正自定义TextField的ForwardRef绑定 #

确保自定义的DatePickerTextField正确将外部ref传递给内部的MUI TextField组件，让DatePicker能通过ref获取到锚点元素：

import { TextField, TextFieldProps } from '@mui/material';
import React from 'react';
import { styled } from '@mui/material/styles';

// 明确ref指向TextField根元素，确保DatePicker能获取到锚点
const DatePickerTextField = React.forwardRef<HTMLDivElement, TextFieldProps>((props, ref) => {
  return <TextField {...props} ref={ref} size="small" InputLabelProps={{}} />;
});

export const DDatePickerTextField = styled(DatePickerTextField)<TextFieldProps>(
  ({ theme }) => ({})
);

2. 修正renderInput中的ref传递逻辑 #

在使用DDatePicker时，避免同时设置冲突的ref属性，将DatePicker提供的params.ref和params.inputRef分别传递给自定义组件对应属性：

<DDatePicker
  {...restDate}
  value={value}
  onChange={callAll((newValue: Date) => {
    onChangeI(newValue);
  }, onChangeRef.current)}
  renderInput={
    !!renderInput
      ? renderInput
      : (params) => {
          return (
            <DDatePickerTextField
              {...params}
              {...textFieldProps}
              ref={params.ref} // 传递DatePicker需要的锚点ref
              inputRef={params.inputRef} // 传递输入框的input元素ref
              name={name}
              error={!!error}
              helperText={error?.message}
            />
          );
        }
  }
/>

额外注意事项 #

• 不要随意覆盖params中的ref或inputRef为自定义值，DatePicker依赖这些ref管理弹窗定位和交互。
• 如果textFieldProps中包含ref或inputRef，建议先排除再展开，避免覆盖正确的参数：

  const { ref: textFieldRef, inputRef: textFieldInputRef, ...restTextFieldProps } = textFieldProps;
  // 后续使用...restTextFieldProps
  

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