reactjs 使用带有分隔符的material-ui自动完成

mtb9vblg 于 2023-02-15 发布在 React

关注(0)|答案(2)|浏览(163)

有没有办法在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属性呈现分隔线

你还有别的主意吗？
感谢您抽出宝贵时间：）

reactjs

来源：https://stackoverflow.com/questions/62654674/using-material-ui-autocomplete-with-dividers

2条答案

按热度按时间

3bygqnnd1#

与其创建一个伪选项，不如标记后面应该有分隔符的选项？
例如，假设要在第三和第四个选项之间添加分隔符，则将第三个选项的isDivider设置为true

options[2].isDivider = true

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

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

赞(0）回复(0）举报 2023-02-15

cu6pst1q2#

您可以使用分组。组可以具有标签或自定义呈现。
标签：

<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>
  )}
  ...

赞(0）回复(0）举报 2023-02-15

我来回答

reactjs 使用带有分隔符的material-ui自动完成

2条答案

相关问题

热门标签

最新问答