通过点击事件/Material UI 关闭弹出窗口

Question

我正在为我的 React 应用程序使用 popover。它工作正常，但我想添加通过单击其中一个菜单项来关闭弹出窗口的功能。

\n\n

我可以通过单击弹出窗口外部来关闭弹出窗口。是否可以通过单击弹出窗口中的菜单项之一来关闭弹出窗口？

\n\n

目前来看

\n\n

\n\n

代码

\n\n

class Home extends React.Component{\n\nconstructor(props){\n    super(props);\n    this.state = {\n        open: false\n    }\n}\n\n handleTouchTap = (event) => {\n// This prevents ghost click.\nevent.preventDefault();\n\nthis.setState({\n  open: true,\n  anchorEl: event.currentTarget,\n });\n};\n\nhandleRequestClose = () => {\nthis.setState({\n  open: false,\n});\n};\n\nrender(){\nreturn(\n<div>\n<div id="PaymentPanel">\n<div className="PaymentTitle">Spent Last 14 Days<button className="PaymentToggle" onClick={this.handleTouchTap}>\xe2\x96\xbc</button></div>\n\n  <Popover\n      open={this.state.open}\n      anchorEl={this.state.anchorEl}\n      anchorOrigin={{horizontal: \'left\', vertical: \'top\'}}\n      targetOrigin={{horizontal: \'right\', vertical: \'top\'}}\n      onRequestClose={this.handleRequestClose}\n    >\n    <Menu>\n       <p className="menuItem" onClick={this.clickHandle}>{!this.state.priceBar? "Spent Last 14 Days" : "Spent Last 14 Days"}</p>\n       <p className="menuItem"  onClick={this.clickHandle}>{this.state.priceBar? "Spent Last 30 Days" : "Spent Last 30 Days"}</p>\n    </Menu>\n   </Popover>\n   </div>\n   </div>\n    )\n    }\n   }\n

\n

Answer 1

从调用handleRequestClose方法clickHandle。我修改了您的代码，请查看此处的工作示例 - https://jsfiddle.net/gjxyc315/

clickHandle = () => {
    this.handleRequestClose();
};
...

<p className="menuItem" onClick={this.clickHandle}>...</p>

您还可以将handleRequestClose方法直接应用于onClick菜单项标签的属性。您将得到相同的结果。

<p className="menuItem" onClick={this.handleRequestClose}>...</p>