单击下拉菜单外部时隐藏下拉菜单

Question

我在 React 应用程序中实现的下拉菜单有问题。

下拉列表基于这篇文章： https : //blog.campvanilla.com/reactjs-dropdown-menus-b6e06ae3a8fe

打开和关闭下拉菜单可以正常工作，但是当我单击菜单中的按钮时，出现以下错误：

TypeError: Cannot read property 'contains' of null

回到博客，看到其他人在评论中也报告了同样的错误：

好一个。 但只是最后一部分不起作用。 dropDownMenu 保持“空”

一种可能的解决方案是将current添加到以下代码行：

原版

if (!this.dropdownMenu.contains(event.target)) {

修改的：

if (!this.dropdownMenu.current.contains(event.target)) {

我在 StackOverflow 上找到了一个类似的答案，其中另一个用户遇到了下拉菜单的问题： Cannot read property 'addEventListener' of null on menu但我仍然无法找出错误。

内部头文件.jsx

import React, { Component } from 'react';
import {Link, withRouter} from 'react-router-dom'
import logo from '../images/logo.svg'
import Settings from '../lotties/Settings'

class InnerHeader extends Component {
  constructor() {
  super();
    
  this.state = {
    showMenu: false,
    fade: false
  };
  
  this.showMenu = this.showMenu.bind(this);
  this.closeMenu = this.closeMenu.bind(this);
}


showMenu(event) {
  event.preventDefault();
  
  this.setState({ showMenu: true }, () => {
    document.addEventListener('click', this.closeMenu);
  });
}

closeMenu(event) {
  if (!this.dropdownMenu.current.contains(event.target)) {
    
    this.setState({ showMenu: false }, () => {
      document.removeEventListener('click', this.closeMenu);
    });  
    
  }
}
 
handleLogout = () => {
    localStorage.removeItem('authToken');
    this.setState({
      currentUser: null
    })
    this.props.history.push("/")
  }

render() {
    return (
        <>
        <div id="inner-header">
          <div className="logo">
            <Link to="/dashboard"><img src={logo} height="50px" alt="site logo" /></Link>
          </div>
          <div>
        <button 
          className="menu-button"
          onClick={this.showMenu}>
          <Settings/>
        </button>
        <br />
        {
          this.state.showMenu
          ? (
            <div
            className="drop-down fade-in"
            ref={(element) => {
              this.dropdownMenu = element;
            }}
            >
                <div className="center-it-menu">
                <Link to="/account">  Account </Link>
                <br />
                <Link to="/integrations"> Integrations </Link>
                <br />
                <Link to="/tutorials"> Tutorials </Link>
                <br />
                <Link to="/support"> Support </Link>
                <br />
                <button id="menu-alert" onClick={this.handleLogout}> Logout </button>
                </div>
              </div>
            )
            : (
              null
              )
            }
      </div>
        </div>
      </>
    )
  }
}

export default withRouter(InnerHeader)

由于我仍在学习编程，因此我不想依赖库来完成这项任务，也不想只是 c&p 一个解决方案。 除了解决方案之外，我想知道是什么导致了这种情况以及如何解决它。 由于它是您在 google react 创建下拉菜单时显示的第一篇文章之一，因此如果其他人试图实现这一点，我希望他们有一个很好的答案。

Answer 1

我必须说，根本不需要所描述场景中的 ref 属性。 要在菜单外部单击时折叠菜单，您可以使用Element.closest()方法，该方法将向下遍历 DOM 树以在event.target祖先中查找className="menu"元素：

 const { Component } = React, { render } = ReactDOM class Card extends Component { constructor() { super(); this.state = { showMenu: false, }; this.showMenu = this.showMenu.bind(this); this.closeMenu = this.closeMenu.bind(this); } showMenu(event) { event.preventDefault(); this.setState({ showMenu: true }, () => { document.addEventListener('click', this.closeMenu); }); } closeMenu(event) { if (!event.target.closest('.menu')) { this.setState({ showMenu: false }, () => { document.removeEventListener('click', this.closeMenu); }); } } render() { return ( <div> <button onClick={this.showMenu}> Show menu </button> { this.state.showMenu ? ( <div className="menu" > <button> Menu item 1 </button> <button> Menu item 2 </button> <button> Menu item 3 </button> </div> ) : ( null ) } </div> ); } } render (<Card />, document.getElementById('root'))

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.12.0/umd/react.production.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.11.0/umd/react-dom.production.min.js"></script><div id="root"></div>

Answer 2

这是因为当您不单击Button 时，此代码不会执行并且不会启动this.dropdownMenu因此它是Undefined 。 在这种情况下，您应该使用onChange事件并向其添加一个侦听器，然后在该函数中执行您想要的任何操作。 愿它会帮助你。