クリックイベント/素材UIでポップオーバーを閉じる

Question

私のリアクションアプリケーションにはポップオーバーが使用されています。それはうまく動作しますが、内部のメニュー項目の1つをクリックしてポップオーバーを閉じる機能を追加したいと思います。

私は、ポップオーバーの外側をクリックすることでポップオーバーを閉じることができます。ポップオーバーのメニュー項目の1つをクリックしてポップオーバーを閉じることは可能ですか？

現在のビュー

コード

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

コールclickHandleからhandleRequestClose方法。私はあなたのコードを変更し、ここでは例を作業を見て - https://jsfiddle.net/gjxyc315/

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

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

ます。また、メニュー項目タグのonClick小道具に直接handleRequestClose方法を適用することができます。あなたは同じ結果を得るでしょう。

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