нажмите на текстовое поле, чтобы открыть всплывающее меню с текстовым полем - PullRequest
Новая
       12

нажмите на текстовое поле, чтобы открыть всплывающее меню с текстовым полем

1 голос
/ 12 октября 2019
  • когда я щелкаю по тексту текстового поля, всплывающее меню должно открываться с текстовым полем.
  • аналогично, когда я щелкаю по значку фильтра в правом углу, должно открываться меню со списком флажков.
  • но сейчас происходит то, что оба меню открываются, когда я щелкаю в обоих местах.
  • только одно меню должно открываться из одного места.
  • Я отлаживал, ставя консоли,проблема заключается в следующих методах

`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}
              >
                <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>

1 Ответ

0 голосов
/ 12 октября 2019

Хорошо, у вас была пара проблем в вашем коде, которые мешали этому работать должным образом.

Идея элемента anchor заключается в том, что меню будет присоединено к этому объекту DOM и будет отображаться прямо рядом сЭто;Все это обрабатывается для вас Материалом, и это работает как обаяние, но дело в том, что вам нужно правильно настроить эти якоря.

Во-первых, вам нужен способ дифференцировать элемент привязки для каждого меню, которое вы хотите. для отображения (в вашем случае их два).

Для этого случая я использовал 'type' опору внутри вашего объекта состояния привязки и другую опору с именем 'target', которая будетхранить 'event.currentTarget'. Примерно так: { type: 'icon', target: event.currentTarget }

Затем вам нужно отделить каждый элемент привязки (который может быть кнопкой, значком, меткой, H1 или чем угодно) от самого компонента Menu;если вы сделаете иначе, то меню никогда не исчезнет, ​​и его можно будет закрыть только с помощью вкладки или обновления. Примерно так: 

<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)
}

Это должно успешно работать.

В любом случае, я изменил ваш кодовый код и обновил его прямо здесь .

Надеюсьэто помогает!

...