Javascript 如何防止在单击选定选项的特定区域时打开材质ui选择选项

我从

@material ui/core/Select

中得到了一个

Select

组件，只有一个选项（为了简化），
我使用的方法如下：

试验
{console.log（{type:'on change'，e}}}
onClick={e=>{console.log（{type:“on click”，e}}}
onOpen={e=>{console.log（{type:“on open”，e}}}
>
{console.log（{type:“点击打开”，e}）}>
打开
{
log（{type:“单击时不打开”，e}）
//做点什么
e、 stopPropagation（）//尽量不要打开选项
}}>
不要打开

它给出了结果（）：

当我单击这两个按钮中的一个时，它会打开

选择

选项。
我的问题是：单击“请勿打开”按钮时，我如何不打开

选择
选项？

我的问题似乎是我无法捕获我的
Select
组件内容上的单击事件。

因此，我的
e.stopPropagation（）
无效

我需要有这样的行为，因为在我的实际用例中

例如，我希望有一个
TextField
组件来代替我的“请勿打开”按钮

感谢您帮助使
处于受控状态将很好

const [open, setOpen] = React.useState(false);

<Select
  value={0}
  onClose={() => {
    setOpen(false);
  }}
  open={open}
>

<MenuItem value={0}>
  <div className="main-option">
    <button
      onClick={() => {setOpen(true)}}
    >
      Open
    </button>
    <button>
      Do not open
    </button>
  </div>
</MenuItem>

const[open，setOpen]=React.useState（false）；
{
setOpen（假）；
}}
open={open}
>
{setOpen（true）}
>
打开
不要打开

完整代码：

import React from "react";
import FormControl from "@material-ui/core/FormControl";
import InputLabel from "@material-ui/core/InputLabel";
import MenuItem from "@material-ui/core/MenuItem";
import Select from "@material-ui/core/Select";

export default function ControlledOpenSelect() {
  const [open, setOpen] = React.useState(false);
  return (
    <FormControl>
      <InputLabel id="demo-controlled-open-select-label">Test</InputLabel>
      <Select
        labelId="demo-controlled-open-select-label"
        id="demo-controlled-open-select"
        value={0}
        onOpen={e => {
          console.log({ type: "on-open"});
        }}
        onClose={() => {
          setOpen(false)
        }}
        open={open}
      >
        <MenuItem value={0}>
          <div className="main-option">
            <button
              onClick={e => {
                console.log({ type: "open-on-click"});
                setOpen(true);
              }}
            >
              Open
            </button>
            <button
              onClick={e => {
                console.log({ type: "do-not-open-on-click"});
              }}
            >
              Do not open
            </button>
          </div>
        </MenuItem>
      </Select>
    </FormControl>
  );
}

从“React”导入React；
从“@material ui/core/FormControl”导入FormControl；
从“@material ui/core/InputLabel”导入InputLabel；
从“@material ui/core/MenuItem”导入菜单项；
从“@material ui/core/Select”导入选择；
导出默认函数ControlleOpenSelect（）{
const[open，setOpen]=React.useState（false）；
返回(
试验
{
log（{type:“on open”}）；
}}
onClose={（）=>{
setOpen（假）
}}
open={open}
>
{
log（{type:“单击打开”}）；
setOpen（真）；
}}
>
打开
{
log（{type:“单击时不打开”}）；
}}
>
不要打开
);
}

在线试用：

谢谢，这解决了我的问题。我在演示中做了一些更改，以便：1。下拉箭头打开选项&2。单击文本字段->（可能会有帮助）