Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How can I add a click handler to BODY from within a React component?

Tags:

I am building a pulldown menu React component that should close when the user clicks anywhere in the DOM outside of the component.

Using jQuery I would typically add an event listener to the body when the pulldown is opened, and remove it again when the pulldown is closed. (The event listener itself closes the pulldown – any click events within the component are not propagated to prevent the body click handler from firing.)

Is there any way to attach a listener to the body element from within a React component? Or should I just use jQuery? (I'm a bit wary of mixing React and jQuery.)

like image 678
Tim Avatar asked Sep 09 '15 17:09

Tim


People also ask

Can you add onClick to React component?

The React onClick event handler enables you to call a function and trigger an action when a user clicks an element, such as a button, in your app. Event names are written in camelCase, so the onclick event is written as onClick in a React app. In addition, React event handlers appear inside curly braces.


2 Answers

React is just JavaScript so attaching a click handler to any element is done as normal by using addEventListener(). Doing this in componentDidMount is normally very nice and tidy and clean up after yourself in componentWillUnmount by removing the added event handler.

var Component = React.createClass({     componentDidMount: function () {         document.body.addEventListener('click', this.myHandler);     },     componentWillUnmount: function () {         document.body.removeEventListener('click', this.myHandler);     },     myHandler: function () {         alert('click');     },     render: function() {         return <div>Hello {this.props.name}</div>;     } }); 
like image 142
Henrik Andersson Avatar answered Oct 29 '22 14:10

Henrik Andersson


It's help who used function based components:

import React, { useEffect  } from 'react';  const ZSideBar = (props) => {      useEffect(() => {         document.body.addEventListener('click', closeSidemenu );          return function cleanup() {             window.removeEventListener('click', closeSidemenu );         }      },[]);     let closeSidemenu = () => {         document.getElementById("sidebar-tree").style.left = "-310px";     }         return (         <div></div>     )  } 
like image 30
Jayesh Naghera Avatar answered Oct 29 '22 14:10

Jayesh Naghera