Breaking News: Grepper is joining You.com. Read the official announcement!

how to use an event listener in a react js component

0xTony143 answered on September 16, 2021 Popularity 10/10 Helpfulness 1/10

answer how to use an event listener in a react js component

related add listener in react

how to use an event listener in a react js component

Comment

class Button extends React.Component {
  scream() {
    alert('AAAAAAAAHHH!!!!!');
  }

  render() {
    return <button onClick={this.scream}>AAAAAH!</button>;
  }
}

ReactDOM.render(<Button />, document.getElementById('app'));

Popularity 10/10 Helpfulness 1/10 Language javascript

Source: Grepper

Tags: event-listener javascript

Link to this answer
Share Copy Link

Contributed on Sep 16 2021

0xTony143

0 Answers Avg Quality 2/10

Closely Related Answers

add listener in react

Comment

// You can do this:
function App() {
  	return (
      	<div onChange={() => console.log('You clicked me')}>
      	hello!
      	</div>
    )
}

// or...
import {useRef, useEffect} from 'react'

const wrapperRef = useRef(null)

useEffect(() => {
  	function callback() {
      	console.log('You clicked me!')
    }
  
  	wrapperRef.current?.addEventListener('click', callback)
  
  	return () => wrapperRef.current?.removeEventListener('click', callback)
}, [])

function App() {
  	return (
      	<div ref={wrapperRef}>
      	hello!
      	</div>
    )
}

Popularity 10/10 Helpfulness 4/10 Language javascript

Source: Grepper

Tags: add

Link to this answer
Share Copy Link

Contributed on Jul 20 2022

0 Answers Avg Quality 2/10

how to use an event listener in a react js component

Contents

More Related Answers

how to use an event listener in a react js component

Closely Related Answers

add listener in react

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.