REACTJS EXAMPLE
CÁC CHỦ ĐỀ
BÀI MỚI NHẤT
MỚI CẬP NHẬT

Tạo một component ScrollEvent trong ReactJS

Trong bài tập này, mình sẽ tạo một component có tên là ScrollEvent để theo dõi sự kiện cuộn và hiển thị vị trí cuộn mới trong console. Điều này sẽ giúp bạn hiểu cách sử dụng hook useEffect để thêm và xóa bộ lắng nghe sự kiện.

Scroll Event trong ReactJS

Đầu tiên, mình sẽ tạo component ScrollEvent. Hãy bắt đầu bằng cách tạo một file mới có tên là ScrollEvent.js. Trong file này, mình sẽ triển khai logic xử lý sự kiện cuộn và hiển thị vị trí cuộn mới.

ScrollEvent.js:

// ScrollEvent.js
import React, { useEffect } from 'react';
import './ScrollEvent.css';

const ScrollEvent = () => {
  useEffect(() => {
    const handleScroll = () => {
      const scrollTop = window.scrollY;
      console.log('Scroll position:', scrollTop);
    };

    window.addEventListener('scroll', handleScroll);

    return () => {
      window.removeEventListener('scroll', handleScroll);
    };
  }, []);

  return (
    <div className="scroll-event">
      <h2>Scroll Event trong ReactJS</h2>
      <div className="content">
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac magna euismod,
          ultricies sapien in, hendrerit ligula. Fusce efficitur justo nec orci gravida,
          id consequat neque eleifend. Nunc sodales ultrices metus, ut efficitur mauris
          blandit eu. Sed nec tellus eget tortor facilisis tristique. Sed venenatis justo
          at turpis varius, vitae scelerisque neque dapibus. Integer vel dolor a orci
          efficitur ultricies at ac purus. Duis id velit at purus tempor volutpat non
          vitae nibh. Quisque aliquet accumsan risus, a dignissim felis malesuada eu.
        </p>
        <p>
          Proin auctor, dolor sit amet accumsan ultrices, urna odio hendrerit augue,
          vitae imperdiet justo risus non libero. Maecenas dapibus risus non dolor
          consectetur tincidunt. Integer sit amet risus vel quam congue malesuada.
          Quisque malesuada tristique tincidunt. Sed eget aliquam elit. Vivamus auctor
          vestibulum nisl, nec pharetra justo interdum a. Vestibulum tincidunt orci
          et felis mattis tristique.
        </p>
        {/* Thêm thêm nội dung ở đây */}
      </div>
    </div>
  );
};

export default ScrollEvent;

ScrollEvent.css:

/* ScrollEvent.css */
.scroll-event {
  padding: 20px;
}

.content {
  height: 1000px; /* Để có nội dung cuộn */
  border: 1px solid #ddd;
}

Tích hợp vào ứng dụng

Sau khi đã triển khai component ScrollEvent, mình sẽ tích hợp nó vào ứng dụng ReactJS. Mở file App.js và thêm ScrollEvent vào trong đó.

App.js:

// App.js
import React from 'react';
import ScrollEvent from './components/ScrollEvent';

const App = () => {
  return (
    <div>
      <h1>ReactJS Handling Events Exercises</h1>
      <ScrollEvent />
      {/* Các component khác có thể được thêm vào đây */}
    </div>
  );
};

export default App;

Kết quả:

z5123653292634 b1d22e2a778f3568fc3c3c0919a92761 jpg

Trong bài tập này, mình đã tìm hiểu cách tạo một component ReactJS để xử lý sự kiện cuộn. Bạn hiện đã có khả năng theo dõi vị trí cuộn của người dùng và thực hiện các tác vụ cụ thể dựa trên sự kiện cuộn đó.

Hãy tiếp tục với các bài tập tiếp theo để mở rộng kiến thức của bạn về xử lý sự kiện trong ReactJS. Chúc bạn có những trải nghiệm lập trình thú vị!

test php

Bài giải

-------------------- ######## --------------------

Câu hỏi thường gặp liên quan:

Cùng chuyên mục:

Bài tập ReactJS: Conditional Rendering trong ReactJS

Bài tập ReactJS: Conditional Rendering trong ReactJS

Bài tập ReactJS: Lists và Keys trong ReactJS

Bài tập ReactJS: Lists và Keys trong ReactJS

Bài tập ReactJS: Forms và Controlled Components trong ReactJS

Bài tập ReactJS: Forms và Controlled Components trong ReactJS

Bài tập ReactJS: State và Lifecycle trong ReactJS

Bài tập ReactJS: State và Lifecycle trong ReactJS

Bài tập ReactJS: Components và Props trong ReactJS

Bài tập ReactJS: Components và Props trong ReactJS

Thiết kế và quản lý form đơn giản với thư viện Formik

Thiết kế và quản lý form đơn giản với thư viện Formik

React Microservices, xây dựng ứng dụng React mạnh mẽ

React Microservices, xây dựng ứng dụng React mạnh mẽ

Xây dựng ứng dụng CRUD với Redux Toolkit cực dễ dàng

Xây dựng ứng dụng CRUD với Redux Toolkit cực dễ dàng

Áp dụng Testing vào React cho ứng dụng của bạn như thế nào?

Áp dụng Testing vào React cho ứng dụng của bạn như thế nào?

Performance Optimization trong React Js, tăng hiệu suất cực ngon

Performance Optimization trong React Js, tăng hiệu suất cực ngon

React Hook là gì? Tại sao React Hook quan trọng trong dự án?

React Hook là gì? Tại sao React Hook quan trọng trong dự án?

Hiểu Route React nâng cao trong 10 phút bằng ví dụ

Hiểu Route React nâng cao trong 10 phút bằng ví dụ

Xây dựng Hook trong React JS (React Custom Hook)

Xây dựng Hook trong React JS (React Custom Hook)

React Hooks là một tính năng mới trong React 16.8. Cho phép sử dụng state…

Tạo ứng dụng ghi chú với ReactJS và Redux

Tạo ứng dụng ghi chú với ReactJS và Redux

Trong bài viết này mình sẽ hướng dẫn xây dựng một ứng dụng ghi chú…

Cách đẩy ứng dụng ReactJS lên Heroku và Deploy trên đó

Cách đẩy ứng dụng ReactJS lên Heroku và Deploy trên đó

Cho bạn nào chưa bíết thì Heroku mà môt nền tảng đám mây hỗ trợ…

Tích hợp Redux vào ReactJS

Tích hợp Redux vào ReactJS

Trong bài viết này chúng ta sẽ cùng nhau đi tìm hiểu về cách tích…

Tạo máy tính đơn giản bằng ReactJS

Tạo máy tính đơn giản bằng ReactJS

Trong bài này ta sẽ xây dựng một ứng dụng máy tính đơn giản bằng…

Redux là gì? Tại sao lại ứng dụng trong ReactJS

Redux là gì? Tại sao lại ứng dụng trong ReactJS

Trong bài viết này chúng ta sẽ cùng nhau đi tìm hiểu về Redux trong…

useContext trong React Hook

useContext trong React Hook

Trong bài viết này chúng ta sẽ cùnuseContextg nhau đi tìm hiểu về useContext trong…

React Router cơ bản

React Router cơ bản

Có thể khẳng định rằng những trang SPA (single page application) hiện đang rất phổ…

Top