使用@mui/material/Autocomplete
,我不能为我的生活使组件只读!
即使renderInput
函数返回<TextField readOnly />
组件,下拉菜单仍然会触发onChange
事件。
我尝试了<Autocomplete readOnly />
,但是这个属性被忽略了。
这似乎是一个严重的设计疏忽,还是我遗漏了什么?并非所有组件都支持相同的属性。
目前,我发现使用disabled
而不是readOnly
会产生所需的结果,但是这会创建一个非统一的表单;某些字段是只读的,其他字段是禁用的。
编辑**
那些发现这个问题的人应该支持并遵循正在进行中的问题上的Github。
**解决办法**
这是我使用的工作解决方案:
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
发布于 2022-03-09 19:28:19
在v5.4.0发行版中,MUI添加了一个可以直接传递给Autocomplete
组件的readOnly
支柱:
<Autocomplete readOnly {...yourOtherProps} />
https://stackoverflow.com/questions/70008342
复制相似问题