首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >如何使MUI自动完成只读?

如何使MUI自动完成只读?
EN

Stack Overflow用户
提问于 2021-11-17 16:41:48
回答 3查看 2.9K关注 0票数 1

使用@mui/material/Autocomplete,我不能为我的生活使组件只读!

即使renderInput函数返回<TextField readOnly />组件,下拉菜单仍然会触发onChange事件。

我尝试了<Autocomplete readOnly />,但是这个属性被忽略了。

这似乎是一个严重的设计疏忽,还是我遗漏了什么?并非所有组件都支持相同的属性。

目前,我发现使用disabled而不是readOnly会产生所需的结果,但是这会创建一个非统一的表单;某些字段是只读的,其他字段是禁用的。

编辑**

那些发现这个问题的人应该支持并遵循正在进行中的问题上的Github。

**解决办法**

这是我使用的工作解决方案:

代码语言:javascript
运行
复制
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
EN

Stack Overflow用户

回答已采纳

发布于 2022-03-09 19:28:19

v5.4.0发行版中,MUI添加了一个可以直接传递给Autocomplete组件的readOnly支柱:

代码语言:javascript
运行
复制
<Autocomplete readOnly {...yourOtherProps} />
票数 2
EN
查看全部 3 条回答
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/70008342

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档