javascript/reactjs를 사용하여 바깥 쪽을 클릭하면 메뉴가 닫힙니다.

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() { 

     return (
      <div className="dropdown small_font" id="myDropdown" onMouseDown={this.onMouseDown} onMouseUp={this.onMouseUp}> 
       {/*<img src={settings} onClick={this.myFunction} className="user_settings_icon"></img>*/} 
       <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"> 
        {/*<div id="myDropdown" className={this.props.actionDropDownCSS}>*/} 
        <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> 
        <a className="dropdown_item"><i className="fa fa-minus-square-o margin_right10px" aria-hidden="true"></i>Unfriend</a> 
        <a className="dropdown_item"><i className="fa fa-sign-out margin_right10px" aria-hidden="true"></i>Leave group</a> 
       </div>:null 
       } 
      </div> 

     ); 
    } 
} 

Answer 1

당신은 u는 질문

이 같은 뭔가

this.closeMenu(){ 
    this.setState({ 
      openmenu: false 
     }) 
} 
<i onBlur={this.closeMenu} />