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)) {
  • 相关阅读:
    How to install tcpping on Linux.md
    当前服务器的并发连接数查看
    Windows 系统下安装 dig 命令
    paping使用来测试联通&网站由于tcp协议导致的无法通信问题超时问题
    SSH反向连接及Autossh
    设置Windows Azure Linux虚拟机中的root账户
    用UltraISO制作CentOS U盘安装盘
    CentOS7 修改网卡名称为eth0
    iOS开发--绘图教程
    ios开发--网页中调用JS与JS注入
  • 原文地址:https://www.cnblogs.com/Answer1215/p/7286982.html
Copyright © 2011-2022 走看看