javascript - 单击文本框文本，弹出菜单应与文本框一起打开

Question

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

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

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

• 你能告诉我如何解决这个问题吗？
• 在下面提供我的代码片段和沙箱。

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 为您处理的，它的工作原理就像一个魅力，但问题是您需要正确设置这个 anchor 。

首先，您需要一种方法来区分要显示的每个菜单的 anchor 元素(在您的情况下，有两个)。

为了使这种情况起作用，我在 anchor 状态对象内使用了一个 'type' Prop ，以及另一个名为 'target' 的 Prop ，它将存储'event.currentTarget'。像这样的东西: { type: 'icon', target: event.currentTarget }

然后，您需要将每个 anchor 元素(可以是按钮、图标、标签、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 处理函数，此时它由钩子(Hook)处理，并且使用相同的变量名存储，除了它修改我之前提到的 'type' 属性。

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

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

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

无论如何，我修改了你的codepen代码并更新了它right here .

希望这有帮助!