Javascript 单击文本框文本，弹出菜单应打开文本框 当我单击文本框文本时，弹出菜单应打开文本框 类似地，当我单击右角的过滤器图标时，菜单应该会打开一个复选框列表 但现在发生的是，当我在两个地方点击时，两个菜单都打开了 只能从一个位置打开一个菜单 我通过放置控制台进行调试。问题在于以下方法

`const handleClick=事件=>{ Setancorel（事件当前目标）； };

const handleClickFilter=事件=>{ Setancorel（事件当前目标）； };`

• 你能告诉我怎么修吗
• 下面提供我的代码片段和沙盒

const handleClick=event=>{
Setancorel（事件当前目标）；
};
const handleClickFilter=事件=>{
Setancorel（事件当前目标）；
};
常量handleClose=（）=>{
setAnchorEl（空）；
};
常量handleCloseFilter=（）=>{
setAnchorEl（空）；
};
文本框
甜点
卡路里
脂肪

好的，您的代码中有几个问题妨碍它正常工作

“anchor”元素的概念是，菜单将附加到DOM对象，并在其旁边呈现；这一切都是为你处理的材料，它的作品像一个魅力，但它的东西，你需要有这个锚正确设置

首先，您需要一种方法来区分要显示的每个菜单的锚元素（在本例中是两个）

为了使本例有效，我在锚定状态对象内部使用了一个

'type'

道具和另一个名为

'target'

的道具，该道具将存储

'event.currentTarget'

。类似这样的内容：

{type:'icon'，target:event.currentTarget}

然后，您需要将每个锚元素（可以是按钮、图标、标签、H1或任何您想要的）与菜单组件本身分离；否则，菜单将永远不会消失，只能使用TAB或刷新来关闭。大概是这样的：

<Typography variant="h6" id="tableTitle">
  <span onClick={handleClickFilter}>NOTICE THIS LABEL HAS THE MENU TRIGGER FUNCTION</span>
  <Menu
    id="simple-menu"
    anchorEl={anchorEl && anchorEl.type === 'textbox' && anchorEl.target}
    open={Boolean(anchorEl && anchorEl.type === 'textbox')}
    onClose={handleClose}
  >
    <MenuItem>
      <form
        autoComplete="off"
      >
        <TextField
          label="Name"
          margin="normal"
        />
      </form>
    </MenuItem>
  </Menu>
</Typography>

这将成功地完成这项工作

无论如何，我修改了你的代码笔代码并更新了它

---

希望这有帮助

好吧，您的代码中有几个问题妨碍它正常工作

“anchor”元素的概念是，菜单将附加到DOM对象，并在其旁边呈现；这一切都是为你处理的材料，它的作品像一个魅力，但它的东西，你需要有这个锚正确设置

首先，您需要一种方法来区分要显示的每个菜单的锚元素（在本例中是两个）

为了使本例有效，我在锚定状态对象内部使用了一个

'type'

道具和另一个名为

'target'

的道具，该道具将存储

'event.currentTarget'

。类似这样的内容：

{type:'icon'，target:event.currentTarget}

然后，您需要将每个锚元素（可以是按钮、图标、标签、H1或任何您想要的）与菜单组件本身分离；否则，菜单将永远不会消失，只能使用TAB或刷新来关闭。大概是这样的：

<Typography variant="h6" id="tableTitle">
  <span onClick={handleClickFilter}>NOTICE THIS LABEL HAS THE MENU TRIGGER FUNCTION</span>
  <Menu
    id="simple-menu"
    anchorEl={anchorEl && anchorEl.type === 'textbox' && anchorEl.target}
    open={Boolean(anchorEl && anchorEl.type === 'textbox')}
    onClose={handleClose}
  >
    <MenuItem>
      <form
        autoComplete="off"
      >
        <TextField
          label="Name"
          margin="normal"
        />
      </form>
    </MenuItem>
  </Menu>
</Typography>

这将成功地完成这项工作

无论如何，我修改了你的代码笔代码并更新了它

---

希望这有帮助

主持人的工作方式是，根据您想要显示的菜单，您需要有不同的主持人。由于您的两个菜单都引用了相同的achor变量，一旦该变量设置了值，菜单组件就会认为它正在被切换。尝试使用两个不同的锚（每个菜单一个），并将它们分别存储在您的状态中。这样，每个菜单都有自己的锚。嘿，你能在我的沙盒中更新吗（主播的工作方式是，根据要显示的菜单，您需要有不同的主播。由于您的两个菜单都引用了相同的achor变量，一旦该变量设置了值，菜单组件就会认为它被切换。尝试使用两个不同的主播（每个菜单一个）并将它们分别存储在您的状态中。这样，每个菜单都有自己的锚。嘿，您能在我的沙盒中更新吗（嘿，但在右手边的角落里，过滤器图标在你的沙箱里被涂上了尿布，你能告诉我如何用复选框图标将该图标带回来吗？在每个边角，一个菜单应该会打开``奇怪，我能看到你说的图标消失了。我甚至在我的手机上进行了测试，它工作正常（iOS 13.x，Chrome）这里没有任何解释；你说的图标不见了，我可以看到它，没有任何问题。我想你的代码可能有错误，或者是你意外删除了它。嘿，但是在右边的角落，过滤器图标在你的沙箱中被涂掉了，你能告诉我如何在每一边的角落带着复选框图标回来吗nu应该打开“奇怪，我能看到你说的图标消失了。我甚至在我的手机上进行了测试，它工作了（iOS 13.x，Chrome）。这里没有解释；你说的图标消失了，我可以看到它，没有任何问题。我想你的代码可能有错误，或者你意外删除了它。