React发送目标以及OnClick事件

时间:2019-03-13 18:39:17

标签: reactjs material-ui

我有两个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

2 个答案:

答案 0 :(得分:1)

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

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

您将可以访问display()中的ID。

答案 1 :(得分:1)

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

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