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

Question

当我单击文本框文本时，弹出菜单应与文本框一起打开。同样，当我单击右侧角落的过滤器图标时，应打开一个带有复选框列表的菜单。但是现在发生的事情是当我在两个地方都单击时两个菜单都打开了。从一个位置只能打开一个菜单。我通过放置控制台进行调试。问题在于以下方法`const handleClick = event => { setAnchorEl(event.currentTarget); };const handleClickFilter = event => { 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}              >          

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'我之前提到的prop之外，它使用相同的变量名进行存储。

const handleClick = event => {

  setAnchorEl({ type: 'textbox', target: event.currentTarget })

}

const handleClose = () => {

  setAnchorEl(null)

}

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

无论如何，我修改了您的 codepen 代码并在此处更新了它。

希望这可以帮助！