클릭 이벤트/재료 UI로 팝업 닫기 Close

내 React Application에 popover를 사용하고 있습니다. 그것은 잘 작동하지만 내부 메뉴 항목 중 하나를 클릭하여 popover를 닫는 기능을 추가하고 싶습니다.클릭 이벤트/재료 UI로 팝업 닫기 Close

나는 popover의 바깥 쪽을 클릭하여 popover를 닫을 수있다. Popover에서 메뉴 항목 중 하나를 클릭하여 Popover를 닫을 수 있습니까?

현재보기

코드

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

출처

2017-09-20 aaayumi

각 항목에 이미 click 이벤트가 정의되어 있고 그 안에 setState를 사용하고 Popover를 닫으셨습니까? –

'Popover'를 원하셨습니까? 그렇다면 질문을 수정하십시오. – bennygenel

죄송합니다. 나는 오타를 바로 잡았다. 지적 해 주셔서 감사합니다. – aaayumi

전화 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>

출처

2017-09-20 10:12:32

클릭 이벤트/재료 UI로 팝업 닫기 Close

답변

관련 문제