自动完成 Material UI：当 multiple={false} 时无法隐藏输入中的选定选项

Question

使用 renderTags={() => null}，我可以禁用在 InputField 中呈现选定的选项。这不适用于 multiple={false}。有没有人有解决方案并且知道为什么会这样？

Answer 1

我认为该道具专门用于 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 可以为您完成这项工作。

自动完成 Material UI：当 multiple={false} 时无法隐藏输入中的选定选项

Autocomplete Material UI: Cant hide selected option in input when multiple={false}

reactjs

autocomplete

material-ui