如何将@mui/material/Autocomplete组件设置为只读状态？

• 使用@mui/material/Autocomplete组件时，无法直接配置实现只读效果
• 即使在renderInput返回的TextField组件上添加readOnly属性，下拉菜单仍然会触发onChange事件
• 直接为Autocomplete组件传入readOnly属性会被忽略，无法生效
• 若使用disabled属性替代readOnly，虽然功能上可以达到禁止修改的效果，但会导致表单样式不统一：部分字段是只读样式，部分是禁用样式

通过封装扩展的Autocomplete组件即可支持readOnly属性，代码如下：

import React, { forwardRef, useState } from 'react';
import PropType from 'prop-types';

import Autocomplete from '@mui/material/Autocomplete';

const AutocompleteEx = forwardRef(({
   readOnly,
   renderInput,
   ...props
}, ref) => {
   const [open, setOpen] = useState(false);
   
   return (
      <Autocomplete ref={ ref }
         open={ open }
         onOpen={ () => !readOnly && setOpen(true) }
         onClose={ () => setOpen(false) }
         disableClearable={ readOnly }
         renderInput={ ({ inputProps, ...params }) => renderInput({ ...params, inputProps: { readOnly, ...inputProps } }) }
         { ...props }
      />
   );
});
AutocompleteEx.propTypes = {
   readOnly: PropType.bool,
   renderInput: PropType.func.isRequired
};
AutocompleteEx.defaultProps = {
   readOnly: false
};

export default AutocompleteEx

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