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

give div event listener functional component

Hacker12_super1 answered on January 27, 2021 Popularity 5/10 Helpfulness 6/10

answer give div event listener functional component

related event listener for functional component

give div event listener functional component

Comment

import React, { useState, useEffect, useRef } from "react";
import ReactDOM from "react-dom";

import "./styles.css";

const App = () => {
  // set default value
  const [scrollTop, setScrollTop] = useState(document.body.scrollTop);

  // create element ref
  const innerRef = useRef(null);

  useEffect(() => {
    const div = innerRef.current;
    // subscribe event
    div.addEventListener("scroll", handleOnScroll);
    return () => {
      // unsubscribe event
      div.removeEventListener("scroll", handleOnScroll);
    };
  }, []);

  const handleOnScroll = (e) => {
    // NOTE: This is for the sake of demonstration purpose only.
    // Doing this will greatly affect performance.
    setScrollTop(e.target.scrollTop);
  }

  return (
    <>
      {`ScrollTop: ${scrollTop}`}
      <div
        style={{
          overflow: 'auto',
          width: 500,
          height: 500,
          border: '1px solid black',
        }}
        ref={innerRef}
      >
        <div style={{ height: 1500, width: 1500 }}>
          Scroll Me
        </div>
      </div>
    </>
  )
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Popularity 5/10 Helpfulness 6/10 Language javascript

Source: stackoverflow.com

Tags: event-listener javascript

Link to this answer
Share Copy Link

Contributed on Mar 29 2022

Hacker12_super1

0 Answers Avg Quality 2/10

Closely Related Answers

event listener for functional component

Comment

import React, { useEffect } from 'react';

const Component = (props) => {  
  useEffect(() => {
    window.addEventListener('scroll', handleScroll);
  });
  useEffect(() => {
    return () => {
      window.removeEventListener('scroll', handleScroll);
    };
  }, []);

  function handleScroll() {
    let scrollTop = window.scrollY;
  }


  return ()
}

Popularity 9/10 Helpfulness 4/10 Language javascript

Source: stackoverflow.com

Tags: event-listener javascript eve

Link to this answer
Share Copy Link

Contributed on Jan 27 2021

Rich Rhinoceros

0 Answers Avg Quality 2/10

give div event listener functional component

Contents

More Related Answers

give div event listener functional component

Closely Related Answers

event listener for functional component

Grepper

Documentation

Social

Legal

Contact

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