使用Material-UI Autocomplete与分隔线

Question

有没有一种方法在material-ui自动完成选项之间添加分隔符？

我只找到了这个解决方法，但我不认为这是最好的方法：

const options = [
    {
      label: 'Opt 1',
      value: 'OPT1'
    },
    {
      label: 'Divider',
      value: 'DIV',
      isDivider: true
    },
    {
      label: 'Opt 2',
      value: 'OPT2'
    },
    {
      label: 'Opt 3',
      value: 'OPT3'
    }
  ];

...

  // used to remove the opacity of disabled items (in my case dividers)
  autocompleteOption: {
    '&[aria-disabled="true"]': {
      opacity: 1
    }
  }

...

<Autocomplete
    options={options}
    multiple
    getOptionLabel={(option) => option.label}
    getOptionSelected={(option, value) => isEqual(value, option)}
    classes={{
      option: classes.autocompleteOption
    }}
    getOptionDisabled={(option) => option.isDivider}
    renderOption={(option) => {
      if (option.isDivider) {
        return <Divider className={classes.divider} />;
      }

      return option.label;
     }}
     ...
 />

• 新增 isDivider 选项，用于添加分隔符
• 新增 getOptionDisabled 方法，用于禁用分隔符选项
• 新增一些样式以去除禁用项目（在我的情况下为分隔符）的不透明度
• 新增 renderOption 方法，用于根据 isDivider 属性渲染分隔符

您还有其他想法吗？

感谢您花费宝贵的时间：）

- Alin

---

我只是想说，我找到了相同的解决方案。 - NiRR

Answer 1

不要创建虚拟选项，而是考虑标记应跟随分隔符的选项？

例如，假设您想在第三个和第四个选项之间添加分隔符。将第三个选项的isDivider设置为true

options[2].isDivider = true

然后在renderOption中插入<Divider />，如下所示：

renderOption={(props, option: any) => (
  <>
    <Li {...props}>{option.title}</Li>
    {option.isDivider ? <Divider /> : null}
  </>
)}

- F Lekschas

Answer 2

这可以通过CSS的':last-of-type'选择器来实现。

- Tugay Yaldız

Answer 3

您可以使用分组。组可以有标签或自定义渲染。

标签：

<Autocomplete
 groupBy={option => option.styleId ? 'Style' : 'Font'}
 ...

分隔符：

<Autocomplete
  renderGroup={params => (
    <li key={params.key}>
      <ul style={{ padding: 0 }}>{params.children}</ul>
        {params.key !== 'your last group' && <Divider />}
    </li>
  )}
  ...

- Mark Toman