javascript - 如何在 Material UI 选择菜单中使用 SubHeaders
问题描述
我正在努力解决如何在使用粘性子标题的Select 控件上正确设置一长串菜单项。问题在于,当项目滚动时,它们会掩盖子标题。
我查看了分组选择项的 Material UI 示例作为开始。我想要看起来像带有固定 subHeader Lists的 Material 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>
这是问题的快照:
解决方案
使用Select组件,我们甚至可以通过一些更正来重现该行为。但它对你不起作用。Select组件不需要嵌套在您孩子的元素中的项目。这样,我们将永远无法识别被选中的元素。
或者,我们有自动完成组件。它可以更好地满足您的需求。
关于您提供的示例,我们可以做一些事情,但同样,我们将无法维护所选项目的状态。 为了实现与列表相同的行为,我们需要将相同的行为应用于菜单将呈现的列表。Select 将呈现一个继承 List 的 Menu,因此我们可以通过 prop MenuListProps属性应用与列表示例相同的行为。
我将修复应用于您的示例
我希望它有所帮助。
推荐阅读
- c# - 无法创建 SSL/TLS 安全通道 - 仅在服务器上。在开发箱上工作
- excel - 获取多个工作表中第一列的计数并将它们显示在单独的工作表中
- ruby-on-rails - rails 默认设置 tmp/ 文件权限
- mysql - 如何重新设计每行具有多个值的数据库
- javascript - 动态添加变量到贝宝按钮渲染
- windows - Windows 或 Windows 安装程序未在应用程序搜索上更新程序图标
- navicat - 如何更改 Navicat 中查询结果选项卡的名称?
- linux - 从 csv 文件中删除非 ascii 特殊字符
- apache-kafka-streams - 从ProcessorContext获取状态存储时是否可能出现InvalidStateStoreException?
- python - 使用元组键从字典创建 MultiIndex pandas DataFrame