单击文本框文本弹出菜单应打开文本框

Question

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

`const handleClick = event => { setAnchorEl(event.currentTarget); };

const handleClickFilter = event => { setAnchorEl(event.currentTarget); };`

• 你能告诉我如何解决它吗？
• 在下面提供我的代码 sn-p 和沙箱。

https://codesandbox.io/s/material-demo-kpt5i

 const handleClick = event => {
    setAnchorEl(event.currentTarget);
  };

  const handleClickFilter = event => {
    setAnchorEl(event.currentTarget);
  };

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

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

  <Typography variant="h6" id="tableTitle" onClick={handleClickFilter}>
            text box
            <Menu
              id="simple-menu"
              anchorEl={anchorEl}
              keepMounted
              open={Boolean(anchorEl)}
              onClose={handleCloseFilter}
            >
              <MenuItem onClick={handleCloseFilter}>
                <form
                  className={classes.container}
                  noValidate
                  autoComplete="off"
                >
                  <TextField
                    id="standard-name"
                    label="Name"
                    className={classes.textField}
                    // value={values.name}
                    // onChange={handleChange('name')}
                    margin="normal"
                  />
                </form>
              </MenuItem>
            </Menu>
          </Typography>

          <Tooltip title="Filter list">
            <IconButton aria-label="filter list">
              <FilterListIcon onClick={handleClick} />
              <Menu
                id="simple-menu"
                anchorEl={anchorEl}
                keepMounted
                open={Boolean(anchorEl)}
                onClose={handleClose}
              >
                <MenuItem onClick={handleClose}>
                  <Checkbox
                    onChange={handleColumnHide}
                    inputProps={{ "aria-label": "select all desserts" }}
                    value="name"
                  />
                  Dessert
                </MenuItem>
                <MenuItem onClick={handleClose}>
                  <Checkbox
                    onChange={handleColumnHide}
                    inputProps={{ "aria-label": "select all desserts" }}
                    value="calories"
                  />
                  Calories
                </MenuItem>
                <MenuItem onClick={handleClose}>
                  <Checkbox
                    onChange={handleColumnHide}
                    inputProps={{ "aria-label": "select all desserts" }}
                  />
                  Fat
                </MenuItem>

Answer 1

好的，你的代码有几个问题导致它无法正常工作。

'anchor' 元素的想法是菜单将附加到该 DOM 对象并在其旁边呈现；这一切都由 Material 为你处理，它就像一个魅力，但你需要正确设置这个锚点。

首先，您需要一种方法来区分要显示的每个菜单的锚元素（在您的情况下，它是两个）。

为了让这个案例起作用，我在你的锚状态对象中使用了一个'type' 道具和另一个名为'target' 的道具，它将存储'event.currentTarget'。像这样的东西：{ type: 'icon', target: event.currentTarget }

然后，您需要将每个锚元素（可以是按钮、图标、标签、H1 或任何您想要的）与 Menu 组件本身分开；如果你不这样做，那么菜单将永远不会消失，它只能使用 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>

然后，最后你需要锚处理函数，此时它由一个钩子处理，它使用相同的变量名存储，除了它修改了我之前提到的 'type' 属性。

const handleClick = event => {
  setAnchorEl({ type: 'textbox', target: event.currentTarget })
}

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

这应该可以成功完成工作。

不管怎样，我修改了你的 codepen 代码并更新了它right here。

希望这会有所帮助！