通过单击事件/材料UI关闭弹出窗口

Question

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

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

当前视图

代码

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>
    )
    }
   }

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>