自动完成 Material UI:当 multiple={false} 时无法隐藏输入中的选定选项
Autocomplete Material UI: Cant hide selected option in input when multiple={false}
使用 renderTags={() => null}
,我可以禁用在 InputField 中呈现选定的选项。这不适用于 multiple={false}
。有没有人有解决方案并且知道为什么会这样?
我认为该道具专门用于 multiple
您可以在此处查看 Autocomplete
的源代码:https://github.com/mui-org/material-ui/blob/9691ba77f3e27193c9cbff77ff85caaca22706b5/packages/material-ui/src/Autocomplete/Autocomplete.js
注意下面的条件语句。它检查 multiple
是否为 true
以及是否 value.length > 0
(另外检查 value
数组是否包含至少 1 个元素)。
虽然它没有在文档中明确说明,但从道具名称本身来看“renderTags
”——这些是您在启用多选时看到的“标签”。
if (multiple && value.length > 0) {
const getCustomizedTagProps = (params) => ({
className: clsx(classes.tag, {
[classes.tagSizeSmall]: size === 'small',
}),
disabled,
...getTagProps(params),
});
if (renderTags) {
startAdornment = renderTags(value, getCustomizedTagProps);
} else {
startAdornment = value.map((option, index) => (
<Chip
label={getOptionLabel(option)}
size={size}
{...getCustomizedTagProps({ index })}
{...ChipProps}
/>
));
}
}
我不完全确定您为什么要在 Autocomplete
上隐藏所选值,但使用 CSS 可以为您完成这项工作。
使用 renderTags={() => null}
,我可以禁用在 InputField 中呈现选定的选项。这不适用于 multiple={false}
。有没有人有解决方案并且知道为什么会这样?
我认为该道具专门用于 multiple
您可以在此处查看 Autocomplete
的源代码:https://github.com/mui-org/material-ui/blob/9691ba77f3e27193c9cbff77ff85caaca22706b5/packages/material-ui/src/Autocomplete/Autocomplete.js
注意下面的条件语句。它检查 multiple
是否为 true
以及是否 value.length > 0
(另外检查 value
数组是否包含至少 1 个元素)。
虽然它没有在文档中明确说明,但从道具名称本身来看“renderTags
”——这些是您在启用多选时看到的“标签”。
if (multiple && value.length > 0) {
const getCustomizedTagProps = (params) => ({
className: clsx(classes.tag, {
[classes.tagSizeSmall]: size === 'small',
}),
disabled,
...getTagProps(params),
});
if (renderTags) {
startAdornment = renderTags(value, getCustomizedTagProps);
} else {
startAdornment = value.map((option, index) => (
<Chip
label={getOptionLabel(option)}
size={size}
{...getCustomizedTagProps({ index })}
{...ChipProps}
/>
));
}
}
我不完全确定您为什么要在 Autocomplete
上隐藏所选值,但使用 CSS 可以为您完成这项工作。