Cara Menggayakan Arahkan Arah di React

Pengantar

Bekerja dengan visual adalah cara terbaik untuk menjaga antarmuka kami tetap interaktif dan untuk menarik perhatian pengguna. Memiliki objek yang dianimasikan di layar kami menciptakan pengalaman unik dan meningkatkan interaktivitas.

Pada artikel ini, kita akan belajar bagaimana melakukan style hover di React menggunakan CSS, serta bagaimana melakukan styling inline hover.

Arahkan kursor adalah kelas semu yang memungkinkan kita menambahkan gaya tertentu untuk membuat pengguna sadar saat mouse mereka aktif dan nonaktif pada elemen tertentu. Untuk artikel ini, kami akan menggunakan kotak:

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

yang memiliki gaya dasar ini:

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

Pada dasarnya, kami akan mengubah warna latar belakang menjadi lightblue saat mouse berada di atas kotak dan kemudian mengembalikannya ke gaya default saat mouse dilepas.

Cara Menggayakan Arahkan Arah di React

Ada dua pendekatan untuk ini: eksternal dan inline. Eksternal melibatkan memiliki file CSS terpisah yang memudahkan gaya untuk mengarahkan kursor, sedangkan gaya sebaris tidak memungkinkan kita untuk menata gaya dengan kelas semu, tetapi kita akan mempelajari cara menata kursor dalam CSS sebaris dengan menggunakan peristiwa mouse di artikel ini.

Cara Menggayakan Arahkan Arah di React Dengan Gaya Eksternal CSS

Ini sangat mirip dengan cara kerja HTML dan CSS; yang harus kita lakukan adalah memberikan elemen a className (Tidak class) atau gunakan tag sebagai pemilih yang akan kita targetkan dan kemudian gayakan kelas pseudo hover:

.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;
}

Yang kami lakukan hanyalah menambahkan :hover pseudo class ke pemilih gaya sebelumnya dan ubah properti apa pun yang ingin kita ubah saat mouse berada di atas elemen.

Cara Menata Arahkan Arahkan kursor ke dalam React Dengan Penataan Sebaris

Dengan penataan sebaris, yang kami maksud adalah penataan melalui tag elemen, yang dilakukan dengan style atribut. Jika kita ingin mengonversi kode sebelumnya menjadi gaya sebaris:

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>
   );
};

Memiliki gaya seperti ini yang berulang dalam Aplikasi kita dapat membuat sulit untuk dibaca, jadi kita dapat membuat objek gaya jika kita hanya menata satu objek pada halaman, dan tidak perlu membuat file untuk itu:

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>
   );
};

Sejauh ini, kami telah membangun kotak kami. Untuk menata hover dengan CSS sebaris di React, kami secara kondisional menyetel gaya sebaris menggunakan status, serta onMouseEnter dan onMouseLeave props, yang memberi tahu kami kapan mouse ada di elemen dan kapan tidak:

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>
   );
};

Pada titik ini, kita dapat menata properti apa pun secara kondisional menggunakan *isHover* negara:

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

Sejauh ini, kami telah melihat bagaimana menerapkannya. Sekarang, mari kita urai kode kita dan jelaskan mengapa kita menggunakan sintaks yang kita lakukan. Kami mulai dengan membuat status yang menyimpan nilai boolean yang menunjukkan saat melayang terjadi (true) dan sebaliknya (secara default disetel ke false):

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

Kami kemudian juga menambahkan dua acara ke div untuk membantu mengubah status kami dan mengetahui kapan mouse ada di dalam kotak dan kapan di luar kotak:

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

Grafik onMouseEnter acara dipicu ketika mouse memasuki elemen, sementara onMouseLeave acara dipicu ketika ia pergi. Kami menetapkan fungsi untuk masing-masing peristiwa ini, yang sekarang kami gunakan untuk mengubah status:

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

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

Kami mengatur state di setiap fungsi berdasarkan peristiwa yang dipicu. Akhirnya, kita dapat menggunakan status untuk menata kotak secara kondisional tidak hanya untuk backgroundColor, tetapi juga untuk gaya lainnya:

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

Saat kita menggabungkan semua ini, kita sekarang dapat menata hover di React dengan gaya 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;

Kesimpulan

Kami mempelajari cara menata hover di React menggunakan gaya eksternal dan gaya sebaris di artikel ini. Meskipun penataan sebaris tidak disarankan, akan sangat berguna untuk memahami cara kerjanya jika kita diminta untuk menggunakannya.