Schliessen Sie das Popover nach click event/Material UI

Question

Ich verwende Popover für meine React Application. Es funktioniert gut, aber ich möchte eine Funktionalität zum Schließen eines Popover hinzufügen, indem Sie auf einen der Menüpunkte klicken.

Ich kann ein Popover schließen, indem ich außerhalb eines Popover klicke. Ist es möglich, ein Popover zu schließen, indem Sie in einem Popover auf einen der Menüpunkte klicken?

Aktuelle Ansicht

-Code

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

Anruf handleRequestClose Methode von clickHandle. Ich änderte den Code zu sehen Beispiel hier zu arbeiten - https://jsfiddle.net/gjxyc315/

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

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

Sie auch handleRequestClose Methode direkt auf onClick Stütze des Menüpunkt Tages anwenden können. Sie erhalten das gleiche Ergebnis.