Kelsonic Kelsonic - 1 year ago 163
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 Source

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);
 }
});
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download