Bagaimana untuk membuat Suis dalam ReactJS?

ReactJS ialah perpustakaan JavaScript yang popular untuk membina antara muka pengguna, yang menyediakan cara yang cekap untuk membangunkan komponen interaktif. Suis togol sering digunakan untuk membolehkan pengguna bertukar antara mod gelap dan tema mod terang dalam aplikasi web. Togol juga boleh digunakan untuk menunjukkan atau menyembunyikan kandungan atau bahagian tertentu halaman. Dalam artikel ini, kami akan meneroka cara membuat togol menggunakan ReactJS.

Prasyarat

Sebelum meneruskan tutorial ini, diandaikan bahawa anda mempunyai pemahaman asas tentang ReactJS dan telah menyediakan persekitaran pembangunan dengan Node.js dan npm dipasang.

Sediakan aplikasi React dan pasang perpustakaan yang diperlukan

Mula-mula, mari buat aplikasi React baharu menggunakan Apl Buat React. Buka command prompt dan jalankan arahan berikut:

npx create-react-app toggle-slider-switch

Arahan ini akan mencipta direktori baharu yang dipanggil "toggle-slider-switch" dan menyediakan aplikasi React asas di dalamnya. Untuk menavigasi ke direktori projek, tulis arahan berikut.

cd toggle-slider-switch

Langkah 2: Cipta komponen ToggleSlider

Dalam direktori src projek, buat fail baharu yang dipanggil ToggleSlider.js. Fail ini akan mengandungi kod komponen peluncur togol kami. Buka fail ToggleSlider.js dalam editor teks kegemaran anda dan tambahkan kod berikut:

Contoh

Dalam kod di bawah, kami telah mengimport useState hook daripada React, yang membolehkan kami mengendalikan keadaan dalam komponen berfungsi. Kami mentakrifkan komponen ToggleSlider yang mengekalkan keadaan suis menggunakan pembolehubah yang diperiksa. Fungsi handleToggle bertanggungjawab untuk mengemas kini keadaan apabila suis diklik.

import React, { useState } from 'react';
import './ToggleSlider.css';

const ToggleSlider = () => {
  const [checked, setChecked] = useState(false);

  const handleToggle = () => {
    setChecked(!checked);
  };

  return (
    <div className="toggle-slider">
      <input
        type="checkbox"
        id="toggle"
        checked={checked}
        onChange={handleToggle}
      />
      <label htmlFor="toggle" className="slider" />
    </div>
  );
};

export default ToggleSlider;

Langkah 3: Gayakan peluncur togol

Buat fail baharu bernama ToggleSlider.css dalam direktori yang sama (src). Tambahkan kod CSS berikut untuk menggayakan peluncur togol:

Contoh

Dalam kod di bawah, kod CSS menggayakan peluncur togol, termasuk suis dan pemegang peluncurnya. input[type='checkbox'] disembunyikan, kami menggunakan label untuk mencetuskan kesan penukaran.

.toggle-slider {
  position: relative;
  width: 60px;
  height: 34px;
}

.slider {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  border-radius: 34px;
  cursor: pointer;
  transition: 0.4s;
}

.slider:before {
  position: absolute;
  content: '';
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  border-radius: 50%;
  transition: 0.4s;
}

input[type='checkbox'] {
  display: none;
}

input[type='checkbox']:checked + .slider {
  background-color: #2196f3;
}

input[type='checkbox']:checked + .slider:before {
  transform: translateX(26px);
}

Langkah 4: Laksanakan komponen ToggleSlider

Seterusnya, mari ubah suai fail App.js dalam direktori src untuk memasukkan komponen ToggleSlider kami. Buka fail App.js dan kemas kini kandungannya dengan kod berikut

Contoh

Dalam kod di bawah, kami mengimport komponen ToggleSlider dan menjadikannya dalam komponen Apl. Ini akan memaparkan peluncur togol kami pada skrin.

import React from 'react';
import ToggleSlider from './ToggleSlider';

const App = () => {
  return (
    <div className="app">
      <h1>Toggle Slider Example
      <ToggleSlider />
    </div>
  );
};

export default App;

Langkah 5: Jalankan apl React

Kini kami boleh menjalankan aplikasi suis togol kami. Dalam gesaan arahan, pastikan anda berada dalam direktori akar projek anda (togol suis gelangsar). Jalankan arahan berikut untuk memulakan pelayan pembangunan React:

Setelah proses penyusunan selesai, penyemak imbas lalai anda akan dibuka dan anda sepatutnya melihat tajuk "Togol Slider Contoh" pada skrin bersama-sama dengan togol slider.

npm start

Langkah 6: Uji Peluncur Togol

Mengklik peluncur togol akan menogol statusnya dan menukar penampilannya. Keadaan awal dalam komponen ToggleSlider ditetapkan kepada "palsu", jadi apabila anda mengklik peluncur, ia bertukar menjadi biru, menunjukkan keadaan "benar". Klik sekali lagi untuk kembali ke keadaan asal.

Output

Kesimpulan

Dalam artikel ini, kami membincangkan cara membuat suis dalam Reactjs. Kami telah merangkumi proses langkah demi langkah untuk menyediakan aplikasi React, mencipta komponen peluncur togol, menggayakan peluncur, melaksanakan komponen dan menjalankan aplikasi. Dengan mengikuti panduan ini, anda kini sepatutnya mempunyai suis peluncur togol ciri dalam aplikasi ReactJS anda, sedia untuk penyesuaian dan penyepaduan selanjutnya ke dalam projek anda.

Atas ialah kandungan terperinci Bagaimana untuk membuat Suis dalam ReactJS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!