zoukankan      html  css  js  c++  java
  • [React] Close the menu component when click outside the menu

    Most of the time, your components respond to events that occur within the component tree by defining their own handler or by accepting a handler defined by a parent component via props. Sometimes, this isn't enough. In this lesson, we'll rely on lifecycle hooks and good old fashioned DOM events to update state in a React component in response to an event that occurs outside of the component tree.

    class Menu extends React.Component {
      constructor(props) {
        super(props)
        this.state = {
          isVisible: false
        }
        this.handleClickOutside = this.handleClickOutside.bind(this)
        this.toggleOptions = this.toggleOptions.bind(this)
        this.handleClick = this.handleClick.bind(this)
      }
      componentDidMount() {
        document.addEventListener('click', this.handleClickOutside)
      }
    
      componentWillUnmount() {
        document.removeEventListener('click', this.handleClickOutside)
      }
    
      handleClickOutside(evt) {
        if (!this.node.contains(evt.target)) {
          this.setState({ isVisible: false })
        }
      }
    
      toggleOptions(evt) {
        evt.preventDefault()
        this.setState(state => ({ isVisible: !state.isVisible }))
      }
    
      handleClick(choice, evt) {
        evt.preventDefault()
        this.props.handleMenuChoice(choice)
        this.setState({ isVisible: false })
      }
    
      render() {
        return (
          <div className="menu" ref={el => (this.node = el)}>
            <a href="#" onClick={this.toggleOptions}>
              Options
            </a>
            {this.state.isVisible
              ? <div className="menuContents">
                  <a href="#" onClick={this.handleClick.bind(null, 'one')}>
                    One
                  </a>
                  <a href="#" onClick={this.handleClick.bind(null, 'two')}>
                    Two
                  </a>
                  <a href="#" onClick={this.handleClick.bind(null, 'three')}>
                    Three
                  </a>
                  <a href="#" onClick={this.handleClick.bind(null, '')}>
                    Clear Selection
                  </a>
                </div>
              : null}
          </div>
        )
      }
    }

    The most important thing is how to detect whether user click outside the menu or not.

    To do that, we use 'ref':

    <div className="menu" ref={el => (this.node = el)}>

    We assign the elememt to vairable 'this.node'.

    console log the node:

    <div class="menu">
        <a href="#">options</a>
    </div>

    When we click inside the menu, the 'evt.target' is the 'a' tag.

    If we click outside the menu, then then 'evt.target' is the whole html tag.

    Therefore, we can check:

    if (!this.node.contains(evt.target)) {
  • 相关阅读:
    简单线程池的设计
    MFC开发--截图工具
    Win32小游戏--蜘蛛纸牌
    C++语言动态创建对象
    C++语言类之间的关系
    c++语言虚函数实现多态的原理(更新版)
    5-24 c++语言之【基础知识】
    小细节--关于printf的输出问题
    Win32小游戏--贪吃蛇
    2020北大夏令营 终末游记
  • 原文地址:https://www.cnblogs.com/Answer1215/p/7286982.html
Copyright © 2011-2022 走看看