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)) {
  • 相关阅读:
    Jenkins获取运行job的用户名(在构建历史中展示构建人)
    Android -tool工具UIautomatorviewer提示“不能让屏幕黑屏”
    转: 谈谈关于内存的一些心得体会
    IP地址,子网掩码划分(转)
    重定向子进程控制台程序的输入输出
    正则表达式(1)
    Log4Net使用指南(转)
    使用wireshark抓本机之间的包(转)
    VirtualBox开发环境的搭建详解(转)
    SxsTrace工具使用方法(转)
  • 原文地址:https://www.cnblogs.com/Answer1215/p/7286982.html
Copyright © 2011-2022 走看看