У меня есть Toggler button
, который открывает раскрывающееся меню.Чтобы добавить функциональность, при которой, если пользователь щелкает в любом месте экрана, кроме этого меню, раскрывающееся меню должно закрываться.Итак, для этого мне нужно создать обработчик кликов и вести запись узла, с которого произошел клик.Если щелчок был выполнен снаружи раскрывающегося узла, меню должно быть закрыто.Это код:
state = {
menuTogglerOpen: false
}
componentWillMount() {
document.addEventListener("mousedown", this.handleClick, false)
}
componentWillUnmount() {
document.removeEventListener("mousedown", this.handleClick, false)
}
handleClick = event => {
if (this.togglerNode.contains(event.target)) {
return
}
this.closeMenuTogglerFromOutside()
}
closeMenuTogglerFromOutside = () => {
this.setState({
menuTogglerOpen: false
})
}
handleMenuToggler = () => {
this.setState({
menuTogglerOpen: !this.state.menuTogglerOpen
})
}
JSX
<Toggler ref={currentNode=> (this.togglerNode = currentNode)}>
<button onClick={this.handleMenuToggler}>
<svg
...button SVG...
</svg>
</button>
{this.state.menuTogglerOpen && (
<TogglerDropDown>
<div className="_dropdown_caret" />
<div className="_dropdown">
<ul>
<li>puspender</li>
<li>settings</li>
<li>help</li>
<li>logout</li>
</ul>
</div>
</TogglerDropDown>
)}
</Toggler>
</HeaderGroup>
</SiteHeaderRight>
При таком подходе каждый щелчок (в любом месте экрана) вызывает метод handleClick.Может ли это повлиять на производительность приложения?Если да, то как лучше справиться с таким событием?
Обновление
Как подсказал Алексей, это решение я реализовал:
handleClick = event => {
if (this.togglerNode.contains(event.target)) {
return
}
this.closeMenuToggler()
}
openMenuToggler = () => {
document.addEventListener("mousedown", this.handleClick, false)
this.setState({
menuTogglerOpen: true
})
}
closeMenuToggler = () => {
document.removeEventListener("mousedown", this.handleClick, false)
this.setState({
menuTogglerOpen: false
})
}
handleMenuToggler = () => {
if (this.state.menuTogglerOpen) {
this.closeMenuToggler()
} else {
this.openMenuToggler()
}
}