Reactjs 通过单击事件/材质界面关闭弹出窗口

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

我可以通过单击popover的外部来关闭popover。是否可以通过单击popover中的一个菜单项来关闭popover

当前视图

代码

class Home扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
开放：假
}
}
handleTouchTap=（事件）=>{
//这可以防止鬼点击。
event.preventDefault（）；
这是我的国家({
开放：是的，
主持人：event.currentTarget，
});
};
HandlerRequestClose=（）=>{
这是我的国家({
开：错，
});
};
render（）{
返回(
过去14天▼
{！this.state.priceBar？“过去14天的花费”：“过去14天的花费”}
{this.state.priceBar？“过去30天的花费”：“过去30天的花费”}
)
}
}

从

单击handle

调用

handleRequestClose

方法。我修改了你的代码，看看这里的工作示例-

---

您已经在每个项目上定义了单击事件，在其中使用setState并关闭Popover，您是否尝试过此操作？您的意思是

Popover

？如果是，请编辑您的问题。对不起。我改正了我的打字错误。谢谢你的指点。我试过了@Mayank Shukla说的话。它很好用。谢谢你的建议。

class Home extends React.Component{

constructor(props){
    super(props);
    this.state = {
        open: false
    }
}

 handleTouchTap = (event) => {
// This prevents ghost click.
event.preventDefault();

this.setState({
  open: true,
  anchorEl: event.currentTarget,
 });
};

handleRequestClose = () => {
this.setState({
  open: false,
});
};

render(){
return(
<div>
<div id="PaymentPanel">
<div className="PaymentTitle">Spent Last 14 Days<button className="PaymentToggle" onClick={this.handleTouchTap}>▼</button></div>

  <Popover
      open={this.state.open}
      anchorEl={this.state.anchorEl}
      anchorOrigin={{horizontal: 'left', vertical: 'top'}}
      targetOrigin={{horizontal: 'right', vertical: 'top'}}
      onRequestClose={this.handleRequestClose}
    >
    <Menu>
       <p className="menuItem" onClick={this.clickHandle}>{!this.state.priceBar? "Spent Last 14 Days" : "Spent Last 14 Days"}</p>
       <p className="menuItem"  onClick={this.clickHandle}>{this.state.priceBar? "Spent Last 30 Days" : "Spent Last 30 Days"}</p>
    </Menu>
   </Popover>
   </div>
   </div>
    )
    }
   }

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

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

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