javascriptの要素の外側をクリックすると要素を削除するには？

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> 

     ); 
    } 
} 

などwindow.onclickなどrender方法でイベントを使用して二度目

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

Answer 1

あなたがクリックアンマウントのイベントやidが推薦するすべてのブラウザ間で機能するソリューションの追加や削除を追跡したくない場合は、次の

私の提案はReactJSのライフサイクルイベントにDOMイベントを添付することですライブラリを使用します。私はhttps://github.com/Pomax/react-onclickoutsideを使用し、それは非常にうまくいく、スニペットをheres。

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

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

export default onClickOutside(MyComponent); 

あなたはそれがないjqueryのだったかのように、あなたがそれを使用して、間違ったリアクト使用して最後にonBlur

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

を使用するライブラリを使用したくない場合。手動で何も削除しないでください。ドロップダウンを閉じるタイミングと開くタイミングを更新した状態があります。

Answer 2

のアイコンをクリックすると、私は取得していますエラーは、あなたの状態、これを更新するたびので、良い習慣ではありませんイベントがインスタンス化されます。

また、州の小道具openmenuとmyFunctionを作成しましたが、正しく使用していないことに気付きました。

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

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