How to close the drop-down menu in the component react?

Lads, Hello.
There's a control with a context menu
render() {
 return (
 <div classname="btn-dwn__marginr wrap-10">
 <button classname="{"btn-dwn" btn--red" + (this.state.dropdownvisible ? 'active' : ")} onclick="{this.handleFilterClick.bind(this)}">
 <svg classname="icon" viewBox="0 0 100 100">
 <path d="M38.25,50h23.5v31.333L38.25,97V50z M3 3v7.833l35.25,35.25h23.5L97,10.833V3H3z"/>
</svg>
</button>
 <div classname="{"btn-dwn__dropdown"" + (this.state.dropdownvisible ? 'active' : ")}></div>
</div>
);
 }

there is such a handler
handleFilterClick(event) {
 const target = event.target;
 this.setState(prevState => ({
 dropdownVisible: !prevState.dropdownVisible
}))
 }

when you click the filter context menu switches the rules. as intended. But how to make it closed if the target is not the button and not the menu itself? Prompt
June 14th 19 at 20:16
2 answers
June 14th 19 at 20:18
As a variant I can suggest - when you open a modal window to create a component with transparency, width:100% height:100% and z-index < modelki
and hang on to it when you click close handler of a modal window

For convenience, you can put it in a component of modelki and just hide display: none;
Read the question? - Sammie_Bart commented on June 14th 19 at 20:21
June 14th 19 at 20:20
As an option:
componentDidMount() {
 document.addEventListener('click', this.onClickOutside);
}

 componentWillUnmount() {
 document.removeEventListener('click', this.onClickOutside);
}

 onClickOutside() {
 this.setState({ visible: false });
 }
Thanks, I think it should work..I also thought in this direction but still forget about the componentDidMount() ...wanted zambesiaca function to do, but felt that would be not right or not quite right - Sammie_Bart commented on June 14th 19 at 20:23
Tell me, and add in componentDidMount (), and delete in componentDidMount() With the addition of clear and delete (not quite understand)? - Colleen.Johnston commented on June 14th 19 at 20:26
I also don't understand your question. In componentDidMount - to hang a handler in componentWillUnmount - delete handler - Colleen.Johnston commented on June 14th 19 at 20:29
I mean, it is a must to remove? - Sammie_Bart commented on June 14th 19 at 20:32
don't know whether nulls reakt references to destroyed components, but better to be safe and remove the listener, otherwise it may be leaking. - Colleen.Johnston commented on June 14th 19 at 20:35
and one more question how to pass event to the function to define the target, and then it will close at all. I always handed in onclick(e) - Sammie_Bart commented on June 14th 19 at 20:38
found necessary through the function to pass a parameter to this function - Colleen.Johnston commented on June 14th 19 at 20:41

Find more questions by tags ReactJavaScript