Реагируйте на цель отправки вместе с событием OnClick

Question

У меня есть два элемента пользовательского интерфейса материала, которые должны открывать разные меню.Как у меня может быть только одна функция дисплея, чтобы оба элемента Поппера открывались и закрывались независимо?Я пытался дать один поппер target="appUI", а другой target="userUI", и тогда через event.target.target я смогу выяснить, на какой из них они нажали, и показать этот поппер, но я не смог заставить его работать ..

  popperDisplay = event => {
    console.log(event.target)
    const { currentTarget } = event;
    this.setState(state => ({
      anchorEl: currentTarget,
      userUI: !state.userUI,
    }));
  };

Ниже приведен пример проекта, который я создал для отображения проблемы https://codesandbox.io/s/k28o1lxw43

Answer 1

Вы можете передавать событие везде, где вы передаете обработчик onClick, например:

<button onClick={event => this.popperDisplay(event)} />

Answer 2

Используйте идентификатор элемента, с которого вы звоните, popperDisplay(event, id), чтобы различать элементы.

https://codesandbox.io/s/1qrn61q2y3?fontsize=14

У вас будет доступ к идентификатору на дисплее ().