在javascript中单击元素外部时如何删除元素？

我已经为我的web应用程序创建了一个下拉菜单，当单击图标时，我正在打开我的下拉菜单。我想在单击下拉菜单以外的任何位置时删除下拉菜单。我当前的方法是在元素外部单击时删除该元素。但我不能打开下拉菜单时，点击图标之后。我怎样才能修好它

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>

        );
    }
}

---

在

render

方法中使用诸如

window.onclick

之类的事件不是一种好的做法，因为每次更新状态时，都会实例化此事件

我还注意到您已经创建了状态属性

openmenu

和

myFunction

，但您没有正确使用它们

我的建议是在ReactJS的生命周期事件中附加DOM事件：

componentDidMount() {
  window.addEventListener('onClick', this.myFunction)
}

componentWillUnmount() {
  // Make sure to remove such event when your component is unmounted
  window.removeEventListener('onClick', this.myFunction)
}

---

如果您不想跟踪卸载时添加和删除的单击事件，以及一个适用于所有浏览器的解决方案，我建议使用库。我用过，效果很好，这里有一个片段

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

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

类MyComponent扩展组件{
handleClickOutside=evt=>{
//…处理代码在这里。。。
};
render（）{
}
}

---

最后，您的使用会做出错误的反应，您使用它就像使用jquery一样，而事实并非如此。您不需要手动删除任何内容。您有更新何时关闭下拉菜单和何时打开下拉菜单的状态。

您正在删除下拉菜单；为什么你又试图重新打开它；还是它误解了你的话？我听说你没有得到正确的答案？我们能为您做些什么？你试过我的方法吗？@mersocarlin yh我用onBlur让它工作了function@CraZyDroid标记正确答案或更新问题这是一个很好的做法，不必不必要地使用会导致额外依赖关系的外部库

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