Question

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

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.

Answer 1

在window.onclick方法中使用render等事件并不是一个好习惯，因为每次更新状态时，都会实例化此事件。

我还注意到您创建了州道具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)
}

Answer 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一样，它不是。你不要手动删除任何东西。您已声明更新何时关闭下拉列表以及何时打开它。

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

2 个答案: