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

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">&nbsp; <span onClick={handleClickFilter}>NOTICE THIS LABEL HAS THE MENU TRIGGER FUNCTION</span>&nbsp; <Menu&nbsp; &nbsp; id="simple-menu"&nbsp; &nbsp; anchorEl={anchorEl && anchorEl.type === 'textbox' && anchorEl.target}&nbsp; &nbsp; open={Boolean(anchorEl && anchorEl.type === 'textbox')}&nbsp; &nbsp; onClose={handleClose}&nbsp; >&nbsp; &nbsp; <MenuItem>&nbsp; &nbsp; &nbsp; <form&nbsp; &nbsp; &nbsp; &nbsp; autoComplete="off"&nbsp; &nbsp; &nbsp; >&nbsp; &nbsp; &nbsp; &nbsp; <TextField&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; label="Name"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; margin="normal"&nbsp; &nbsp; &nbsp; &nbsp; />&nbsp; &nbsp; &nbsp; </form>&nbsp; &nbsp; </MenuItem>&nbsp; </Menu></Typography>然后，最后您需要锚点处理函数，此时它由一个钩子处理，并且除了修改'type'我之前提到的prop之外，它使用相同的变量名进行存储。const handleClick = event => {&nbsp; setAnchorEl({ type: 'textbox', target: event.currentTarget })}const handleClose = () => {&nbsp; setAnchorEl(null)}这应该可以成功完成工作。无论如何，我修改了您的 codepen 代码并在此处更新了它。希望这可以帮助！