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

IT技术 javascript jquery reactjs dom
2021-05-24 02:46:09

我为我的网络应用程序创建了一个下拉菜单，当点击一个图标时，我打开了我的下拉菜单。当我单击下拉菜单以外的任何地方时，我想删除下拉菜单。我当前的方法是在元素外部单击时删除元素。但是之后单击图标时我无法打开下拉菜单。我该如何解决？

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>

        );
    }
}

第二次点击图标时出现的错误

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

如果您不想跟踪在卸载时添加和删除点击事件以及适用于所有浏览器的解决方案 id 建议使用库。我使用过https://github.com/Pomax/react-onclickoutside并且效果很好，这是一个片段。

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>
  }
}

最后你使用 React 是错误的，你使用它就像它是 jquery 而不是。你不会手动删除任何东西。您已声明更新何时关闭下拉菜单以及何时打开它。

使用诸如window.onclickinrender方法的事件不是一个好习惯，因为每次更新状态时都会实例化此事件。

我还注意到您已经创建了 state propsopenmenu，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)
}
其它你可能感兴趣的问题
上一篇使用 onchange 事件更新状态具有延迟字符 下一篇app.use 和 app.get 之间的区别 *在代理中*