是否可以在 material-ui 中禁用 <MenuItem> ？答案

【问题标题】：Is it possible to disable a <MenuItem> in material-ui?是否可以在 material-ui 中禁用 <MenuItem> ？
【发布时间】：2021-06-07 14:50:30
【问题描述】：

所以我正在尝试使用 React 和 Material-UI 编写一个自定义组合框。它将在输入中显示所选值，在下拉列表中提供选项列表（MenuItems），并在底部有一个文本框用于输入新选项。

Here's what it looks like

<TextField
  className={classes.textBox}
  select
  onChange={handleChange}
  label="My input"
>
  <MenuItem value={10}>Ten</MenuItem>
  <MenuItem value={20}>Twenty</MenuItem>
  <MenuItem value={30}>Thirty</MenuItem>
  <MenuItem>
    <TextField />
  </MenuItem>
</TextField>

问题是每当我单击 TextField 时，它都会认为我正在选择它并关闭下拉菜单。是否可以防止这种行为？

【问题讨论】：

可以分享一下jsfiddle或者codepen吗？
对不起，我对codepen不是很熟悉，似乎无法正确导入Material-UI组件

标签： javascript reactjs material-ui

【解决方案1】：

你也可以使用AutoComplete，这里是material ui文档中的参考。 Material ui autocomplete docs

如果您想禁用 MenuItem，您可以将其放入您的代码中。示例：

<MenuItem disabled>MenuItem disabled</MenuItem>

【讨论】：

感谢您的回答。 disabled 道具确实允许我在不关闭菜单的情况下单击输入，不幸的是它也使我无法输入文本。自动完成是我发现的下一个最好的东西，但我实际上不需要过滤或“自动完成”选项，这迫使我发布这个问题。

【解决方案2】：

经过大量挖掘和更多尝试和错误，我找到了一种解决方法。在我的示例中，我需要拦截 TextField 上的点击事件并应用 event.stopPropagation()。

完整的工作示例：

 <TextField
  select
  onChange={handleChange}
  label="My input"
>
  <MenuItem value={10}>Ten</MenuItem>
  <MenuItem value={20}>Twenty</MenuItem>
  <MenuItem value={30}>Thirty</MenuItem>
  <MenuItem>
    <TextField
      onClick={(event) => event.stopPropagation()}
      label="New item"
      onChange={() => { console.log('change') }}
    />
  </MenuItem>
</TextField>

【讨论】：

【解决方案3】：

我试过了，真的试过了，找不到办法。看起来它没有控制关闭事件的功能。喜欢 EX：Menu 有 onClose prop 但 TextField 没有

编辑：我认为你应该使用this第二个选项disableClosOnSelect

【讨论】：

感谢您查看，我终于找到了使用 event.stopPropagation() 的解决方法 - 查看我的答案！