我是react-virtualization和Autocomplete的新手。我目前已经构建了一个列表,当选中复选框时会显示多个文本。下面是我的代码:https://codesandbox.io/s/material-demo-forked-1qzd3?file=/demo.tsx
我想只显示一个文本时,任何东西都是从列表中选择,并删除清除按钮和灰色背景附加到它。
我是react-virtualization和Autocomplete的新手。我目前已经构建了一个列表,当选中复选框时会显示多个文本。下面是我的代码:https://codesandbox.io/s/material-demo-forked-1qzd3?file=/demo.tsx
我想只显示一个文本时,任何东西都是从列表中选择,并删除清除按钮和灰色背景附加到它。
6条答案
按热度按时间xoshrz7s1#
有一个专用的prop来禁用Icon。在Autocomplete组件上尝试prop
"disableClearable"
,它在文档中:cyej8jka2#
从MUIv 5开始,Autocomplete不再出现在实验室中,它的作用有点不同,可以让你在显示屏上进行更多的自定义。清除图标和向下箭头都在传入renderInput函数的InputProps.endAdornment中。因此,你可以在扩展到TextField之前将其删除。
注意InputProps在{... params}点差之后的情况。
如果你这样做,你需要添加'openOnFocus' prop ,因为向下箭头不会在那里点击打开自动完成。
MUI还为.MuiInput-root类添加了一些paddingRight,为clearIcon和downArrow腾出一些空间,所以如果空间紧张,可能需要删除它们,我最终在TextField类上使用了!important css规则,但我们仍然使用旧的JSS方式。不确定正确的情感样式方式是什么。
gopyfrb33#
试试这个:
smdncfj34#
返回所有参数,
TextField
中不包含endAdornment
7rfyedvj5#
使用typescript和设置
disableClearable={true}
的受控MuiAutocomplete可能会导致类型检查错误(错误:值应为T或undefined)。当我的受控值类型定义为T时,我就遇到了这种情况|无效。
在这种情况下,只需
disableClearable={value !== null}
即可解决问题4ngedf3f6#
我在Material UI V5中使用
freeSolo
解决了这个问题。您必须将
disableClearable={true}
添加到Autocomplete
,然后从Textfield
中删除type:text
。你应该有这样的东西。