在javascript中的元素外单击时如何删除元素? [英] How to remove element when clicking outside the element in javascript?

问题描述

我已经为我的Web应用程序创建了一个下拉菜单，当单击一个图标时，我正在打开我的下拉菜单.当我单击下拉菜单以外的其他位置时，我想删除下拉菜单.我当前的方法是在元素外部单击时删除该元素.但是，在此之后单击图标时，我无法打开下拉菜单.我该如何解决?

I have created a dropdown menu for my web app and when clicking on a icon i'm opening my dropdown menu. I want to remove the dropdown menu when i click anywhere other than the dropdown menu. My current approach removes the element when clicking outside the element. But i cannot open the dropdown menu when clicking on the icon after that. How can i fix it?

class DropDown extends Component {

    constructor(props) {
        super(props);

        this.myFunction = this.myFunction.bind(this);

        this.state = {

            openmenu:false

        }

    };

    myFunction(e) {

        e.stopPropagation();

        this.setState({

            openmenu: !this.state.openmenu

        })

    render() {
        window.onclick = function (event) {
            if (!event.target.matches('myDropdown')) {

                document.getElementById('myDropdown2').remove();

            }
        }


        return (
            <div className="dropdown small_font" id="myDropdown" >

                <i className="fa fa-cog user_settings_icon" style={{marginTop: '6px'}} onClick={this.myFunction}
                   aria-hidden="true"></i>

                {this.state.openmenu?
                <div className="dropdown-content" id="myDropdown2">

                    <a className="dropdown_item"><i className="fa fa-trash-o margin_right10px" aria-hidden="true"></i>Delete</a>
                    <a className="dropdown_item"><i className="fa fa-flag-o margin_right10px" aria-hidden="true"></i>Report</a>

                </div>:null
                }
            </div>

        );
    }
}

第二次单击图标时出现错误

The error i'm getting when clicking on the icon for the second time

Uncaught DOMException: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.

推荐答案

如果您不想跟踪卸载时的添加和删除点击事件，建议在所有浏览器上使用的解决方案id建议使用库.香港专业教育学院使用 https://github.com/Pomax/react-onclickoutside 效果很好，这是一个摘要.

If you don't want to keep track of adding and removing click events on unmount and a solution that works across all browsers id recommend using a library. Ive used https://github.com/Pomax/react-onclickoutside and it works very well, heres a snippet.

import React, { Component } from "react";
import onClickOutside from "react-onclickoutside";

class MyComponent extends Component {
  handleClickOutside = evt => {
    // ..handling code goes here...
  };
}

export default onClickOutside(MyComponent);

如果您不想使用库，请使用onBlur

If you dont want to use a library use the onBlur

class MyComponent extends Component {
  handleClickOutside = evt => {
    // ..handling code goes here...
  };
  render(){
    <div onBlur={this.handleClickOutside}>
      <SomeChild />
    </div>
  }
}

最后您使用React错误，您使用它就像是不是jquery.您不手动删除任何内容.您有状态说明何时关闭和何时打开下拉列表.

Lastly your using React wrong, your using it as if it was jquery which it is not. you dont remove anything manually. You have state that you update when to close the dropdown and when to open it.

这篇关于在javascript中的元素外单击时如何删除元素?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！