Question

我有两个Material UI的Popper元素，它们应该打开不同的菜单。我怎么只有这样的1个Display功能才能使Popper元素独立打开和关闭？我试图给一个弹出器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

使用您要从中调用的元素的ID popperDisplay(event, id)来区分元素。

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

您将可以访问display（）中的ID。

Answer 2

您可以通过以下方式将事件传递给onClick处理程序：

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

React发送目标以及OnClick事件

2 个答案: