如何在材质 UI 选择菜单中使用子标题

Question

我正在努力了解如何在使用粘性子标题的Select控件上正确设置一长串菜单项。问题是，当项目滚动时，它们会遮盖副标题。我查看了分组选择项的材质 UI 示例作为开始。我想要看起来像带有固定子标题列表的材质 UI 示例的行为。这是我正在尝试的代码沙盒。下面是我的代码片段：<Select        className={classes.root}        MenuProps={{ className: classes.menu }}        value="Pick one"        onChange={e => {}}      >        {subHeaders.map(header => (          <li key={header}>            <ul>              <ListSubheader>{header}</ListSubheader>              {items.map(item => (                <MenuItem key={item} value={item}>                  {item}                </MenuItem>              ))}            </ul>          </li>        ))}      </Select>以下是问题的快照：

Answer 1

使用Select组件，我们甚至可以通过一些更正来重现行为。但它对你不起作用。“选择”组件不需要嵌套在子元素中的项。这样，我们将永远无法识别所选的元素。

或者，我们有自动完成组件。它可以更好地满足您的需求。

关于您提供的示例，我们可以执行一些操作，但同样，我们将无法维护所选项目的状态。要实现与列表相同的行为，我们需要将相同的行为应用于 Menu 将呈现的列表。Select 将呈现一个继承 List 的 Menu，因此我们可以通过 prop MenuListProps 属性应用与列表示例相同的行为。

我已将修复程序应用于您的示例

Answer 2

我设法用粘性菜单项制作了一个Material-ui选择的工作解决方案。

使用 MaterialUI MenuItem 而不是所有<li> <ul> <ListSubheader>

    const [isOpen, setIsOpen] = useState(false);

    const [value, setValue] = useState();

    

    const onToggle = () => {

        setIsOpen((prev) => !prev);

      };

    

    const onClose = () => {

        setIsOpen(false);

      };

    

    const _onChange = (event: React.ChangeEvent<{ value: unknown }>) => {

        const valueToSelect = event.target.value as Value;

        if (

          isResetSeletced(valueToSelect) ||

          (multiple

            ? !valueToSelect.length ||

              valueToSelect.length < minSelections ||

              (valueToSelect as string[]).some((option) => !option)

            : !valueToSelect?.length && minSelections > 0)

        ) {

          return;

        }

        event.persist();

        onChange(valueToSelect);

      };

    

      const renderValue = (selected: any) => {

        if (!selected.length) {

          return '';

        }

        if (multiple) {

          const isReachedLimit = selected.length > MAX_SELECTIONS;

          const hiddenTags = isReachedLimit ? (

            <span>+{value.length - MAX_SELECTIONS}</span>

          ) : null;

          const selectionsToShow = isReachedLimit

            ? selected.slice(0, MAX_SELECTIONS)

            : selected;

          return (

            <StyledTagsContainer>

              <Tags values={selectionsToShow} onRemoveTag={onRemoveTag} />

              {hiddenTags}

            </StyledTagsContainer>

          );

        }

        return selected;

      };

  const resetMenuItem = secondaryOptions?.map((resetItem, index) => {

    return (

      <MenuItem

        key={resetItem.value + index}

        onClick={() => {

          resetItem.onClick();

        }}

        isLast={!index}

        isSelected={

          resetItem.value === resetSelected?.value ||

          resetItem.value === value ||

          (multiple && resetItem.value === value[0])

        }

        value={resetItem.value}

        icon={<RadioIcon />}

      >

        {resetItem.text}

      </MenuItem>

    );

  });

    

    

    <Select

        displayEmpty

        onClose={onClose}

        value={value}

        onChange={_onChange}

        renderValue={renderValue}

        open={isOpen}

      >

        {menuItems}

        <div style={{ position: 'sticky', bottom: 0 }}>

          {resetMenuItem}

        </div>

    </Select>