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)) {
  • 相关阅读:
    java生成json字符串的方法
    JSON的三种解析方式
    Android Studio你不知道的调试技巧
    Android 打开URL
    build.gradle中引入jar
    Spark RDD/Core 编程 API入门系列之map、filter、textFile、cache、对Job输出结果进行升和降序、union、groupByKey、join、reduce、lookup(一)
    NovaMind *的安装、和谐破解到永久使用
    小Q书桌的下载、安装和使用
    作业提交过程分析(源码)
    SparkContext的初始化过程分析(源码)
  • 原文地址:https://www.cnblogs.com/Answer1215/p/7286982.html
Copyright © 2011-2022 走看看