Guest User

Untitled

a guest
Jan 16th, 2019
58
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 0.90 KB | None | 0 0
  1. class MenuButton extends Component {
  2. constructor (props) {
  3. super (props)
  4. this.state = {showMenu: false}
  5. this.toggleMenu = this.toggleMenu.bind(this)
  6. }
  7.  
  8. toggleMenu () {
  9. let showMenu = !this.state.showMenu
  10. this.setState({showMenu})
  11. }
  12.  
  13. componentDidMount () {
  14. window.addEventListner('click', e => {
  15. if (e.target !== document.getElementById('menu-div') {
  16. this.setState({showMenu: false})
  17. }
  18. })
  19. }
  20.  
  21. render () {} {
  22. return (
  23. <div>
  24. <button onClick={this.toggleMenu}>Menu</button>
  25. {this.state.showMenu ? <div id='menu-div><Menu /></div> : null}
  26. </div>
  27. )
  28. }
  29. }
  30.  
  31. const Menu = () => {
  32. return (
  33. <div>
  34. <Component1/>
  35. <Component2/>
  36. <Component3/>
  37. </div>
  38. )
  39. }
  40.  
  41. componentDidMount () {
  42. window.addEventListner('click', e => {
  43. if (e.target !== this.refOfMenu && !this.refOfMenu.contains(e.target)) {
  44. this.setState({showMenu: false})
  45. }
  46. })
  47. }
Add Comment
Please, Sign In to add comment