我有两个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
答案 0 :(得分:1)
使用您要从中调用的元素的ID
popperDisplay(event, id)
来区分元素。
https://codesandbox.io/s/1qrn61q2y3?fontsize=14
您将可以访问display()中的ID。
答案 1 :(得分:1)
您可以通过以下方式将事件传递给onClick
处理程序:
<button onClick={event => this.popperDisplay(event)} />