Cách tạo kiểu cho Hover trong React

Giới thiệu

Làm việc với hình ảnh là một cách tuyệt vời để giữ cho giao diện của chúng tôi có tính tương tác và thu hút sự chú ý của người dùng. Việc hiển thị các đối tượng hoạt hình trên màn hình của chúng ta sẽ tạo ra trải nghiệm độc đáo và tăng tính tương tác.

Trong bài viết này, chúng ta sẽ tìm hiểu cách tạo kiểu di chuột trong React bằng cách sử dụng CSS, cũng như cách tạo kiểu di chuột nội tuyến.

Hover là một lớp giả chỉ cho phép chúng ta thêm các kiểu cụ thể để giúp người dùng biết khi nào chuột của họ bật và tắt một thành phần cụ thể. Đối với bài viết này, chúng tôi sẽ sử dụng một hộp:

const App = () => {
   return (
      <div>
         <div className="box">
            <p>Hover me!</p>
         </div>
      </div>
   );
};

có kiểu cơ bản này:

.box {
   height: 200px;
   width: 200px;
   background-color: rgb(0, 191, 255);
   display: flex;
   justify-content: center;
   align-items: center;
   font-size: 30px;
   cursor: pointer;
}

Về cơ bản, chúng tôi sẽ thay đổi màu nền thành lightblue khi con chuột ở trên hộp và sau đó đưa nó trở lại kiểu mặc định khi con chuột được gỡ bỏ.

Cách tạo kiểu cho Hover trong React

Có hai cách tiếp cận cho điều này: bên ngoài và bên trong. Bên ngoài liên quan đến việc có một tệp CSS riêng biệt giúp dễ dàng tạo kiểu khi di chuột, trong khi kiểu nội tuyến không cho phép chúng ta tạo kiểu bằng lớp giả, nhưng chúng ta sẽ tìm hiểu cách tạo kiểu di chuột trong CSS nội tuyến bằng cách sử dụng các sự kiện chuột trong bài viết này.

Cách tạo kiểu cho Di chuột trong React với Tạo kiểu bên ngoài CSS

Điều này rất giống với cách HTML và CSS hoạt động; tất cả những gì chúng ta phải làm là cung cấp cho phần tử một className (Không class) hoặc sử dụng thẻ làm bộ chọn mà chúng tôi sẽ nhắm mục tiêu và sau đó tạo kiểu cho lớp giả di chuột:

.box {
   height: 200px;
   width: 200px;
   background-color: rgb(0, 191, 255);
   display: flex;
   justify-content: center;
   align-items: center;
   font-size: 30px;
   cursor: pointer;
}

.box:hover {
   background-color: lightblue;
}

Tất cả những gì chúng tôi đã làm là thêm :hover lớp giả cho bộ chọn được tạo kiểu trước đó và thay đổi bất kỳ thuộc tính nào mà chúng ta muốn thay đổi khi chuột qua phần tử.

Cách tạo kiểu Di chuột trong React với Tạo kiểu nội tuyến

Bằng cách tạo kiểu nội tuyến, chúng tôi muốn nói đến việc tạo kiểu thông qua thẻ của phần tử, được thực hiện bằng style thuộc tính. Nếu chúng ta muốn chuyển đổi mã trước đó thành kiểu nội tuyến:

const App = () => {
   return (
      <div>
         <div
            style={{
               height: '200px',
               width: '200px',
               backgroundColor: 'rgb(0, 191, 255)',
               display: 'flex',
               justifyContent: 'center',
               alignItems: 'center',
               fontSize: '30px',
               cursor: 'pointer',
            }}
         >
            <p>Hover me!</p>
         </div>
      </div>
   );
};

Việc lặp lại các kiểu như thế này trong Ứng dụng của chúng tôi có thể gây khó đọc, vì vậy chúng tôi có thể tạo một đối tượng kiểu nếu chúng tôi chỉ tạo kiểu cho một đối tượng trên một trang và không cần tạo tệp cho nó:

const App = () => {

const boxStyle = {
   height: '200px',
   width: '200px',
   backgroundColor: 'rgb(0, 191, 255)',
   display: 'flex',
   justifyContent: 'center',
   alignItems: 'center',
   fontSize: '30px',
   cursor: 'pointer',
};

   return (
      <div>
         <div style={boxStyle}>
            <p>Hover me!</p>
         </div>
      </div>
   );
};

Cho đến nay, chúng tôi đã xây dựng xong hộp của mình. Để tạo kiểu di chuột bằng CSS nội tuyến trong React, chúng tôi đặt có điều kiện các kiểu nội tuyến bằng cách sử dụng một trạng thái, cũng như onMouseEnter và onMouseLeave đạo cụ, cho chúng ta biết khi nào chuột ở trên phần tử và khi nào thì không:

import { useState } from 'react';

const App = () => {
   const [isHover, setIsHover] = useState(false);

   const handleMouseEnter = () => {
      setIsHover(true);
   };
   const handleMouseLeave = () => {
      setIsHover(false);
   };

   const boxStyle = {
      <!-- ... -->
   };

   return (
      <div>
         <div
            style={boxStyle}
            onMouseEnter={handleMouseEnter}
            onMouseLeave={handleMouseLeave}
         >
            <p>Hover me!</p>
         </div>
      </div>
   );
};

Tại thời điểm này, chúng ta có thể tạo kiểu có điều kiện cho bất kỳ thuộc tính nào bằng cách sử dụng *isHover* tiểu bang:

const boxStyle = {
   
   backgroundColor: isHover ? 'lightblue' : 'rgb(0, 191, 255)',
};

Cho đến nay, chúng ta đã thấy cách triển khai nó. Bây giờ, hãy chia nhỏ mã của chúng tôi và giải thích lý do tại sao chúng tôi sử dụng cú pháp mà chúng tôi đã làm. Chúng tôi bắt đầu bằng cách tạo một trạng thái lưu trữ giá trị boolean cho biết khi nào quá trình di chuột xảy ra (true) và nếu không (theo mặc định, nó được đặt thành false):

const [isHover, setIsHover] = useState(false);

Sau đó, chúng tôi cũng đã thêm hai sự kiện vào div để giúp thay đổi trạng thái của chúng tôi và biết khi nào chuột ở trên hộp và khi nào nó ra khỏi hộp:

<div
   style={boxStyle}
   onMouseEnter={handleMouseEnter}
   onMouseLeave={handleMouseLeave}
>
   <p>Hover me!</p>
</div>

Sản phẩm onMouseEnter sự kiện được kích hoạt khi chuột vào phần tử, trong khi onMouseLeave sự kiện được kích hoạt khi nó rời đi. Chúng tôi đã chỉ định một chức năng cho mỗi sự kiện này, hiện chúng tôi sử dụng để thay đổi trạng thái:

const handleMouseEnter = () => {
   setIsHover(true);
};

const handleMouseLeave = () => {
   setIsHover(false);
};

Chúng tôi đặt state trong mỗi chức năng dựa trên sự kiện được kích hoạt. Cuối cùng, chúng ta có thể sử dụng trạng thái để tạo kiểu hộp có điều kiện không chỉ cho backgroundColor, mà còn cho bất kỳ kiểu nào khác:

const boxStyle = {
   
   backgroundColor: isHover ? 'lightblue' : 'rgb(0, 191, 255)',
   color: isHover ? 'red' : 'green',
};

Khi chúng ta kết hợp tất cả những điều này lại với nhau, bây giờ chúng ta có thể tạo kiểu di chuột trong React với kiểu Inline:

import { useState } from 'react';

const App = () => {
   const [isHover, setIsHover] = useState(false);

   const handleMouseEnter = () => {
      setIsHover(true);
   };

   const handleMouseLeave = () => {
      setIsHover(false);
   };

   const boxStyle = {
      height: '200px',
      width: '200px',
      display: 'flex',
      justifyContent: 'center',
      alignItems: 'center',
      fontSize: '30px',
      cursor: 'pointer',
      backgroundColor: isHover ? 'lightblue' : 'rgb(0, 191, 255)',
      color: isHover ? 'red' : 'green',
   };

   return (
      <div>
         <div
            style={boxStyle}
            onMouseEnter={handleMouseEnter}
            onMouseLeave={handleMouseLeave}
         >
            <p>Hover me!</p>
         </div>
      </div>
   );
};

export default App;

Kết luận

Chúng ta đã học cách tạo kiểu di chuột trong React bằng cách sử dụng cả kiểu bên ngoài và kiểu nội tuyến trong bài viết này. Mặc dù kiểu nội tuyến không được khuyến khích, nhưng sẽ rất hữu ích khi hiểu cách hoạt động của nó trong trường hợp chúng tôi được nhắc sử dụng.