Kelsonic Kelsonic - 3 months ago 19
Javascript Question

Difference between onBlur() and react-onclickoutside's onClickOutside()

I am trying to evaluate the difference between using React's onBlur event and using the NPM react-onClickOutside.

I need to be able to hide a menu when clicking outside of it, but would prefer not to have yet another dependency if React's onBlur event is already capable of it.

Answer

you can achieve it with below code, Using the life-cycle methods add and remove event listeners to the document.

React.createClass({
 handleClick: function (e) {
    if (ReactDOM.findDOMNode(this).contains(e.target)) {
        return;
    }
 },

 componentWillMount: function () {
    document.addEventListener('click', this.handleClick, false);
 },

 componentWillUnmount: function () {
    document.removeEventListener('click', this.handleClick, false);
 }
});