Javascript 包含子项的物料UI菜单赢得'；不要关闭整个菜单

我有一个带有自定义菜单项的材质UI菜单组件。现在，当菜单和一个子菜单打开时，我希望能够在单击菜单外部时关闭整个菜单。我仍然需要做两次点击，首先关闭子菜单，然后关闭实际菜单

文档中提到使用

anchorEl

作为

boolean

来确定菜单是否打开，但即使我从自定义菜单项发送关闭回调函数，当在组件外部单击时，它也只会使用

handleClose（）

自动关闭。因此，在所附图片中，只有包含公司融资的容器关闭，菜单也关闭

无法理解，因为

关闭功能中的
主播
正在变为空，核心菜单仍保持打开状态。尝试使用基于模态组件构建的菜单、菜单项和弹出框

菜单组件：

const MoreMenu = ({
  userTagData,
  onChangeItemName,
  selectedTags,
  onTagSelected,
  onRemoveItem,
  data,
  item,
}) => {
  const [anchorEl, setAnchorEl] = useState(null);
  const [subMenuPopUpName, setSubMenuPopUpName] = useState('');


  const renderChangeTitlePopUp = () => (
    <ChangeTitleContainer
      onChangeItemName={onChangeItemName}
      closeMenuItem={handleClose}
      item={item}
    />
  );


  const renderAddTagPopUp = () => (
    <AddTagContainer
      item={item}
      userTagData={userTagData}
      selectedTags={selectedTags}
      onTagSelected={onTagSelected}
    />
  );

  const renderRemoveItemContainer = () => (
    <RemoveItemContainer
      item={item}
      onRemoveItem={onRemoveItem}
      closeMenuItem={handeleClose}
    />
  );

  const renderDefaultPopup = () => (
    <div><p>Standard menu post</p></div>
  );


  const menuItemPopUpSwitcher = (name) => {
    switch (name) {
      case ADDTAG:
        return renderAddTagPopUp();
      case CHANGETITLE:
        return renderChangeTitlePopUp();
      case REMOVEITEM:
        return renderRemoveItemContainer();
      default:
        return renderDefaultPopup();
    }
  };

  const handleMenuItemClick = (item, event) => {
    setAnchorEl(event.currentTarget);
    setSubMenuPopUpName(item.title);
    setAnchorEl(event.currentTarget);
    menuItemPopUpSwitcher(item);
  };

  const handleClose = () => {
    setAnchorEl(null);
  };

  return (
    <Fragment>
      <MoreButton
        data={data}
        handleMenuItemClick={handleMenuItemClick}
      />
      <Menu
        open={Boolean(anchorEl)}
        anchorEl={anchorEl}
        onClose={handleClose}
        anchorOrigin={{
          vertical: 'top',
          horizontal: 'left',
        }}
        transformOrigin={{
          vertical: 'top',
          horizontal: 'right',
        }}
      >

        {menuItemPopUpSwitcher(subMenuPopUpName)}

      </Menu>
    </Fragment>
  );
};custom 

const more菜单=({
userTagData，
onChangeItemName，
选定的标签，
安塔格被选中，
在RemoveItem，
数据，
项目,，
}) => {
常量[anchorEl，setAnchorEl]=useState（null）；
const[subnumoppupname，setSubmenupoppupname]=useState（“”）；
常量renderChangeTitlePopUp=（）=>(
);
const renderadtAgPopup=（）=>(
可以通过为父锚点添加另一个状态来解决问题。因此，父菜单有自己的锚点，子菜单弹出自己的锚点，然后handleClose（）将两者都禁用。请参见示例和5行标记为//这是新的：

const MoreMenu = ({
  userTagData,
  onChangeItemName,
  selectedTags,
  onTagSelected,
  onRemoveItem,
  data,
  item,
}) => {
  const [parentAnchorEl, setParentAnchorEl] = useState(null); // THIS IS NEW
  const [anchorEl, setAnchorEl] = useState(null);
  const [subMenuPopUpName, setSubMenuPopUpName] = useState('');

  const handleMoreButtonClick = (event) => { // THIS IS NEW
    setParentAnchorEl(event.currentTarget);
  };

  const renderChangeTitlePopUp = () => (
    <ChangeTitleContainer
      onChangeItemName={onChangeItemName}
      closeMenuItem={handleClose}
      item={item}
    />
  );


  const renderAddTagPopUp = () => (
    <AddTagContainer
      item={item}
      userTagData={userTagData}
      selectedTags={selectedTags}
      onTagSelected={onTagSelected}
    />
  );

  const renderRemoveItemContainer = () => (
    <RemoveItemContainer
      item={item}
      onRemoveItem={onRemoveItem}
      closeMenuItem={handeleClose}
    />
  );

  const renderDefaultPopup = () => (
    <div><p>Standard menu post</p></div>
  );


  const menuItemPopUpSwitcher = (name) => {
    switch (name) {
      case ADDTAG:
        return renderAddTagPopUp();
      case CHANGETITLE:
        return renderChangeTitlePopUp();
      case REMOVEITEM:
        return renderRemoveItemContainer();
      default:
        return renderDefaultPopup();
    }
  };

  const handleMenuItemClick = (item, event) => {
    setAnchorEl(event.currentTarget);
    setSubMenuPopUpName(item.title);
    setAnchorEl(event.currentTarget);
    menuItemPopUpSwitcher(item);
  };

  const handleClose = () => {
    setAnchorEl(null);
    setParentAnchorEl(null); //THIS IS NEW
  };

  return (
    <Fragment>
      <MoreButton
        anchorEl={parentAnchorEl} //THIS IS NEW
        data={data}
        handleMenuItemClick={handleMenuItemClick}
        handleClick={handleMoreButtonClick}    //THIS IS NEW
      />
      <Menu
        open={Boolean(anchorEl)}
        anchorEl={anchorEl}
        onClose={handleClose}
        anchorOrigin={{
          vertical: 'top',
          horizontal: 'left',
        }}
        transformOrigin={{
          vertical: 'top',
          horizontal: 'right',
        }}
      >

        {menuItemPopUpSwitcher(subMenuPopUpName)}

      </Menu>
    </Fragment>
  );
};custom 


const more菜单=({
userTagData，
onChangeItemName，
选定的标签，
安塔格被选中，
在RemoveItem，
数据，
项目,，
}) => {
const[parentancorel，setparentancorel]=useState（null）；//这是新的
常量[anchorEl，setAnchorEl]=useState（null）；
const[subnumoppupname，setSubmenupoppupname]=useState（“”）；
const handleMoreButtonClick=（事件）=>{//这是新的
setParentAnchorEl（event.currentTarget）；
};
常量renderChangeTitlePopUp=（）=>(
);
const renderadtAgPopup=（）=>(
);
常量renderRemoveItemContainer=（）=>(
);
常量renderDefaultPopup=（）=>(
标准菜单栏

);
const menuItemPopUpSwitcher=（名称）=>{
交换机（名称）{
case ADDTAG：
返回renderAddTagPopUp（）；
案例名称：
返回renderChangeTitlePopUp（）；
案例移除项目：
返回renderRemoveItemContainer（）；
违约：
返回renderDefaultPopup（）；
}
};
常量handleMenuItemClick=（项目、事件）=>{
Setancorel（事件当前目标）；
设置子菜单OpupName（项目名称）；
Setancorel（事件当前目标）；
菜单终端交换机（项目）；
};
常量handleClose=（）=>{
setAnchorEl（空）；
setParentAnchorEl（null）；//这是新的
};
返回(
{menuItemPopUpSwitcher（子菜单popupName）}
);
}；习俗
如果您能提供复制问题的帮助，那么提供帮助会更容易/更快。谢谢@RyanCogswell我会查看CodeSandbox，看起来这是一种很好的测试方法。@PatrikRikama Hinnenberg您解决了吗？我对MUIYes的4.8.0版也有同样的问题，让我尝试提供示例@radzik.here，希望这个例子的答案能解释它@radzik。