Buat suis togol dalam React sebagai komponen yang boleh diguna semula

Dalam artikel ini, kami akan membuat komponen React Toggle yang diilhamkan oleh iOS. Ini akan menjadi komponen kecil dan serba lengkap yang boleh anda gunakan semula dalam projek-projek masa depan. Semasa kami pergi, kami juga akan membina aplikasi Demo React mudah yang menggunakan komponen suis togol adat kami.

Walaupun kita boleh menggunakan perpustakaan pihak ketiga untuk ini, membina komponen dari awal membolehkan kita lebih memahami bagaimana kod kita berfungsi dan membolehkan kita menyesuaikan komponen kita sepenuhnya.

kotak semak secara tradisinya digunakan untuk mengumpul data binari, seperti ya atau tidak, benar atau palsu, membolehkan atau melumpuhkan, hidup atau mati, dan lain -lain. Walaupun beberapa reka bentuk antara muka moden mengelakkan medan borang apabila membuat suis togol, saya akan melekat dengan mereka di sini kerana kebolehcapaian mereka yang lebih besar.

Berikut adalah tangkapan skrin komponen yang akan kami bina:

Takeaways Key

Gunakan Create React App untuk dengan cepat menyediakan aplikasi React baru dan membina komponen suis togol yang diilhamkan oleh iOS yang boleh diguna semula.

• Leverage SCSS untuk menggayakan suis togol, memastikan ia menarik secara visual dan sejajar dengan standard reka bentuk moden.
• Melaksanakan suis togol sebagai komponen terkawal dalam React, menggunakan prop untuk menguruskan keadaan dan tingkah lakunya secara dinamik.
• Meningkatkan kebolehcapaian dengan membuat papan kekunci suis togol boleh diakses dan menggunakan atribut ARIA yang sesuai.
• Gunakan proptypes untuk pemeriksaan jenis dalam komponen untuk memastikan data yang diperlukan diluluskan dan jenis yang betul.
• Terokai bertekanan dan responsif maju dengan menggabungkan pembolehubah SCSS dan pertanyaan media untuk menyesuaikan penampilan Togol Switch pada peranti yang berbeza.
Langkah 1 - Membuat aplikasi React

mari kita gunakan aplikasi React React untuk mendapatkan komponen React Switch dengan cepat dan berjalan. Jika anda tidak biasa dengan Create React App, lihat kami

Panduan Bermula

.

Sebaik sahaja semuanya telah dipasang, ubah ke direktori yang baru dibuat dan mulakan pelayan dengan Benang Mula (atau NPM bermula jika anda lebih suka). Ini akan memulakan pelayan pembangunan di

create-react-app toggleswitch

http: // localhost: 3000

. Seterusnya, buat direktori toggleswitch dalam direktori SRC. Di sinilah kita akan membuat komponen kita:

Dalam direktori ini, buat dua fail: toggleswitch.js dan toggleswitch.scss:

mkdir src/ToggleSwitch

Akhirnya, ubah app.js seperti berikut:

touch ToggleSwitch.js ToggleSwitch.scss

Langkah 2 - Markup

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

function App() {
  return (
    <ToggleSwitch />
  );
}

export default App;

kita boleh mulakan dengan menyediakan elemen borang input kotak semak HTML asas untuk komponen Toggle React kami dengan sifat yang diperlukan.

create-react-app toggleswitch

Kemudian, tambahkan tag

di sekelilingnya dan tag betul -betul di bawah tag untuk membuat label yang mengatakan, togol saya!

mkdir src/ToggleSwitch

Menambah segala -galanya, anda harus mendapatkan sesuatu seperti ini:

Kami juga boleh menyingkirkan teks label dan menggunakan tag itu sendiri untuk memeriksa atau menyahtandakan kawalan input kotak semak. Untuk itu, tambahkan dua tag di dalam tag untuk membina pemegang suis dan suis bertukar:

touch ToggleSwitch.js ToggleSwitch.scss

Langkah 3 - Menukar kepada Komponen React

Sekarang kita tahu apa yang perlu masuk ke HTML, yang perlu kita lakukan ialah menukar HTML menjadi komponen React. Mari kita mulakan dengan komponen asas di sini. Kami akan menjadikan ini komponen kelas, dan kemudian kami akan mengubahnya menjadi cangkuk, kerana lebih mudah bagi pemaju baru untuk mengikuti keadaan daripada

useState apabila membina butang Switch React. Tambahkan yang berikut ke fail src/toggleswitch/toggleswitch.js yang kami buat dalam langkah 1.

Pada ketika ini, tidak mungkin untuk mempunyai pelbagai slider suis togol pada paparan atau halaman yang sama kerana pengulangan IDS. Walaupun kita boleh memanfaatkan cara komponen reaksi di sini, kita akan menggunakan

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

function App() {
  return (
    <ToggleSwitch />
  );
}

export default App;

props

untuk mengasingkan nilai -nilai secara dinamik:

this.props.name akan mengisi nilai -nilai ID, nama dan untuk (perhatikan bahawa ia adalah htmlfor dalam React Js) secara dinamik, supaya anda boleh lulus nilai yang berbeza ke komponen dan mempunyai beberapa contoh pada halaman yang sama.

<input type="checkbox" name="name"  />

Jika anda perasan, tag tidak mempunyai tag akhir . Sebaliknya, ia ditutup dalam tag permulaan seperti , yang mana

benar -benar halus dalam jsx

. anda boleh menguji komponen ini dengan mengemas kini app.js dengan kod di bawah.

Periksa output di http: // localhost: 3000/(mungkin menggunakan alat penyemak imbas anda) dan pastikan semuanya berfungsi dengan betul.

<div >
  <input type="checkbox"  name="toggleSwitch"  />
  <label  for="toggleSwitch">
    Toggle Me!
  </label>
</div>

Langkah 4 - Styling dan SCSS

Saya baru -baru ini menulis tentang

Komponen React Styling

, di mana saya membandingkan pelbagai cara ini mungkin. Dalam artikel itu, saya membuat kesimpulan bahawa SCSS adalah kaedah terbaik, dan itulah yang akan kami gunakan di sini.

Untuk SCSS untuk bekerja dengan Create React App, anda perlu memasang pakej SASS

.

NOTA

: Sebelum ini, banyak pemaju yang digunakan node-sass untuk ini. Tetapi, perpustakaan node-sass kini telah ditolak dan disyorkan untuk menggunakan sass atau sass-emp-embedded . 🎜> Kami juga perlu mengimport fail yang betul ke dalam komponen kami:

create-react-app toggleswitch

sekarang untuk gaya. Ini adalah garis besar dari apa yang kita lakukan untuk gaya butang Switch React kami.

• Secara lalai, suis hanya 75px lebar dan vertikal sejajar dalam blok sebaris supaya ia sejajar dengan teks dan tidak menyebabkan masalah susun atur.
• kami akan memastikan kawalan tidak boleh dipilih supaya pengguna tidak dapat menyeret dan menjatuhkannya.
• Kami akan menyembunyikan input kotak semak asal.
• kedua-dua :: selepas dan :: sebelum unsur-unsur pseudo perlu digayakan dan dijadikan unsur-unsur untuk membawa mereka ke dalam dom dan gaya mereka.
• kami juga akan menambah beberapa peralihan CSS untuk kesan animasi yang sejuk.

Dan inilah yang kelihatan seperti dalam SCSS. Tambahkan yang berikut ke Src/Toggleswitch/toggleswitch.scss:

mkdir src/ToggleSwitch

Sekarang, jalankan pelayan sekali lagi di http: // localhost: 3000/, dan anda akan melihat empat suis togol gaya yang baik. Cuba togol mereka; Mereka semua harus bekerja.

Juga, luangkan sedikit masa untuk melalui kod di atas. Jika ada apa -apa yang anda tidak pasti, anda boleh merujuk dokumentasi

, atau bertanya soalan di forum SitePoint . label dinamik

Pada masa ini, pilihan togol keras dikodkan:

Untuk menjadikan komponen lebih fleksibel, kita boleh merebut ini secara dinamik dari kawalan menggunakan

touch ToggleSwitch.js ToggleSwitch.scss

attribut data HTML5

:

kami akan mengikat kod atribut data untuk ujian tetapi akan menjadikan ini lebih fleksibel dalam versi akhir:

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

function App() {
  return (
    <ToggleSwitch />
  );
}

export default App;

Jika anda menjalankan aplikasi, anda harus melihat sesuatu seperti ini:

<input type="checkbox" name="name"  />

Langkah 6 - Membuat versi komponen yang lebih kecil

Juga, menggunakan versi yang lebih kecil dari komponen suis bertindak balas tanpa teks untuk skrin yang lebih kecil akan menjadi idea yang hebat. Oleh itu mari kita tambahkan gaya untuknya dengan beberapa saiz minimum dan keluarkan teks:

berkenaan dengan respons, kita harus mengubah saiz lengkap, jadi mari kita gunakan fungsi skala CSS. Di sini kami telah meliputi semua lebar responsif berasaskan bootstrap peranti.

<div >
  <input type="checkbox"  name="toggleSwitch"  />
  <label  for="toggleSwitch">
    Toggle Me!
  </label>
</div>

anda boleh menguji perubahan ini dengan menambahkan kelas suis kecil ke elemen

induk dalam toggleswitch.js:

<div >
  <input type="checkbox"  name="toggleSwitch"  />
  <label  for="toggleSwitch">
    <span ></span>
    <span ></span>
  </label>
</div>

kembali ke pelayan dev dan uji perubahan anda. Jika anda ingin menyemak apa yang anda ada terhadap fail SCSS yang telah selesai,

anda boleh mendapati bahawa di sini

import React, { Component } from "react";

class ToggleSwitch extends Component {
  render() {
    return (
      <div className="toggle-switch">
        <input
          type="checkbox"
          className="toggle-switch-checkbox"
          name="toggleSwitch"
          
        />
        <label className="toggle-switch-label" htmlFor="toggleSwitch">
          <span className="toggle-switch-inner" />
          <span className="toggle-switch-switch" />
        </label>
      </div>
    );
  }
}

export default ToggleSwitch;

.

Langkah 6 - Theming in SCSS

Oleh kerana kita boleh menggunakan pembolehubah dalam SCSS, lebih mudah untuk menambah sokongan untuk tema warna berganda. Anda boleh membaca lebih lanjut mengenai ini dalam " Sass Theming: The Never Ending Story ". Kami akan menggunakan beberapa tema warna di sini dan menukar semua warna mentah kepada pembolehubah. Tiga baris pertama adalah set warna yang boleh dikonfigurasikan, yang membantu kita tema kawalan kecil kita:

create-react-app toggleswitch

Dan itu dengan gaya. Sekarang mari kita tambahkan beberapa interaktiviti.

Langkah 7 - Interaksi dan JavaScript

Sila ambil perhatian bahawa bahagian berikut hanya mengandungi kod demo untuk menerangkan konsep. Anda tidak boleh mengemas kini komponen toggleswitch sebenar anda di bahagian ini.

Komponen asas kami akan menjadi komponen bodoh (atau komponen persembahan) yang negerinya akan dikawal oleh komponen induk atau bekas, seperti bentuk. Apa yang kita maksudkan dengan dikawal? Nah, mari kita lihat versi yang tidak terkawal terlebih dahulu:

mkdir src/ToggleSwitch

Apabila pengguna berinteraksi dengan input kotak semak di atas, ia akan bertukar -tukar antara keadaan yang diperiksa dan tidak terkawal dengan sendirinya tanpa kami perlu menulis mana -mana JavaScript. Elemen Input HTML boleh menguruskan keadaan dalaman mereka sendiri dengan mengemas kini DOM secara langsung.

Walau bagaimanapun, dalam React, disarankan kami menggunakan

komponen terkawal

, seperti yang ditunjukkan dalam contoh berikut:

di sini, React mengawal keadaan input kotak semak. Semua interaksi dengan input ini perlu melalui DOM maya. Sekiranya anda cuba berinteraksi dengan komponen seperti itu, tiada apa yang akan berlaku, kerana kami tidak menentukan sebarang kod JavaScript yang boleh mengubah nilai prop yang diperiksa yang kami lalui.

touch ToggleSwitch.js ToggleSwitch.scss

3

Sekarang, input kotak semak adalah interaktif. Pengguna boleh menukar komponen "ON" dan "OFF" seperti sebelumnya. Satu -satunya perbezaan di sini ialah keadaan dikawal oleh React, berbanding dengan versi yang tidak terkawal sebelumnya. Ini membolehkan kami dengan mudah mengakses keadaan komponen kami pada bila -bila masa melalui JavaScript. Kami juga boleh dengan mudah menentukan nilai awal apabila mengisytiharkan komponen.

Sekarang, mari kita lihat bagaimana kita boleh menggunakannya dalam komponen toggleswitch. Berikut adalah contoh berasaskan kelas yang mudah:

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

function App() {
  return (
    <ToggleSwitch />
  );
}

export default App;

Sekarang mari kita menukar komponen berasaskan kelas ke dalam komponen berfungsi menggunakan cangkuk:

<input type="checkbox" name="name"  />

seperti yang anda lihat, kami secara drastik mengurangkan bilangan garis menggunakan komponen berfungsi dan kaedah penciptaan cangkuk.

Jika cangkuk reaksi baru kepada anda, "

<div >
  <input type="checkbox"  name="toggleSwitch"  />
  <label  for="toggleSwitch">
    Toggle Me!
  </label>
</div>

React cangkuk: Bagaimana untuk memulakan & membina sendiri

".

Langkah 8 - Memuktamadkan komponen toggleswitch

Sekarang, mari kita kembali ke komponen toggleswitch kami. Kami memerlukan alat peraga berikut:

• id (diperlukan): Ini adalah ID yang akan dihantar ke kawalan input kotak semak. Tanpa itu, komponen tidak akan diberikan.
• diperiksa (diperlukan): Ini akan memegang keadaan semasa, yang akan menjadi nilai boolean.
• onchange (diperlukan): Fungsi ini akan dipanggil apabila pengendali acara onchange input dicetuskan.
• Nama (pilihan): Ini akan menjadi teks label input kotak semak, tetapi kami biasanya tidak menggunakannya.
• Kecil (Pilihan): Nilai boolean ini menjadikan suis togol dalam mod kecil tanpa memberikan teks.
• OptionLabels (Pilihan): Jika anda tidak menggunakan versi kecil kawalan, anda mungkin perlu lulus ini ke suis togol sebagai pelbagai dua nilai, yang menandakan teks untuk benar dan palsu. Contohnya ialah teks = {["ya", "tidak"]}.
• Dilumpuhkan (Pilihan): Ini akan dihantar secara langsung ke .

Apabila versi kecil tidak digunakan, teks opsyen berikut akan digunakan sebagai lalai:

create-react-app toggleswitch

Oleh kerana kebanyakan alat peraga perlu ditetapkan oleh pengguna, dan kami tidak boleh menggunakan nilai sewenang -wenangnya, lebih baik untuk menghentikan rendering jika alat peraga yang diperlukan tidak diluluskan. Ini boleh dilakukan dengan menggunakan JavaScript mudah jika pernyataan atau pengendali ternary menggunakan? : Atau litar pintas &&:

mkdir src/ToggleSwitch

Apabila aplikasi kami berkembang, kami dapat menangkap banyak pepijat dengan pemeriksaan jenis. React mempunyai beberapa kebolehan pemeriksaan jenis terbina dalam. Untuk menjalankan pemeriksaan jenis pada alat untuk komponen, anda boleh menetapkan harta Proptypes khas. Kami boleh menguatkuasakan senarai prop di atas menggunakan Perpustakaan

Proptype React, sebuah perpustakaan yang berasingan yang mengeksport pelbagai pengesahan yang boleh digunakan untuk memastikan data yang anda terima adalah sah. anda boleh memasangnya seperti:

Kemudian, import perpustakaan proptypes menggunakan:

touch ToggleSwitch.js ToggleSwitch.scss

kami akan menentukan proptypes dengan cara berikut:

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

function App() {
  return (
    <ToggleSwitch />
  );
}

export default App;

dengan cara penjelasan:

<input type="checkbox" name="name"  />

proptypes.string.isrequired: Ini adalah nilai rentetan, dan ia diperlukan dan wajib.

• proptypes.string: Ini adalah nilai rentetan, tetapi ia tidak wajib.
• proptypes.func: Prop ini mengambil fungsi sebagai nilai, tetapi ia tidak wajib.
• proptypes.bool: Ini adalah nilai boolean, tetapi ia tidak wajib.
• proptypes.array: Ini adalah nilai array, tetapi ia tidak wajib.
Sekarang, kita boleh meneruskan dengan komponen toggleswitch. Gantikan kandungan src/toggleswitch/toggleswitch.js dengan yang berikut:

Akhirnya, untuk menguji komponen, kemas kini app.js dengan kod di bawah:

<div >
  <input type="checkbox"  name="toggleSwitch"  />
  <label  for="toggleSwitch">
    Toggle Me!
  </label>
</div>

create-react-app toggleswitch

Sekarang, apabila anda menuju ke http: // localhost: 3000/, anda harus melihat toggle yang bekerja.

Butang togol kerja

Langkah 9 - Membuat Papan Kekunci Komponen boleh diakses

Langkah terakhir adalah menjadikan papan kekunci komponen kami dapat diakses. Untuk melakukan ini, pertama, ubah label seperti di bawah:

mkdir src/ToggleSwitch

Seperti yang anda lihat, kami telah menambah harta TabIndex, yang kami tetapkan kepada 1 (fokus) atau -1 (tidak fokus), bergantung kepada sama ada komponen kini dilumpuhkan.

kami juga mengisytiharkan fungsi HandsKeyPress untuk menangani ia menerima input papan kekunci:

touch ToggleSwitch.js ToggleSwitch.scss

Pemeriksaan ini jika kunci ditekan adalah bar ruang. Jika ya, ia menghalang tindakan lalai penyemak imbas (tatal halaman dalam kes ini) dan bertukar keadaan komponen.

Dan pada dasarnya semua yang anda perlukan. Komponen kini boleh diakses oleh papan kekunci.

Walau bagaimanapun, ada sedikit masalah. Jika anda mengklik komponen toggleswitch, anda akan mendapat garis besar keseluruhan komponen, yang mungkin tidak diingini. Untuk memerangi ini, kita dapat mengubah sedikit perkara untuk memastikan ia menerima garis besar apabila ia memberi tumpuan kepada papan kekunci, tetapi tidak apabila ia diklik:

di sini, kami telah menambah harta Tabindex ke kedua -dua elemen dalaman untuk memastikan mereka tidak dapat menerima fokus.

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

function App() {
  return (
    <ToggleSwitch />
  );
}

export default App;

Kemudian, kemas kini fail toggleswitch.scss dengan kod di bawah untuk memohon gaya ke elemen dalaman toggleswitch apabila ia memberi tumpuan kepada papan kekunci tetapi tidak apabila ia diklik.

Anda boleh membaca lebih lanjut mengenai teknik ini

<input type="checkbox" name="name"  />

di sini

. Ia sedikit hacky dan harus dijatuhkan memihak kepada menggunakan: fokus-kelihatan , sebaik sahaja mendapat sokongan pelayar yang cukup luas. Apabila anda menjalankan aplikasi, anda harus dapat menukar komponen menggunakan bar ruang.

keyboard boleh diakses toggle

Contoh yang lebih lengkap

Untuk menyelesaikan, saya ingin menunjukkan contoh yang lebih lengkap menggunakan komponen toggleswitch dalam codesandbox berikut.

Atas ialah kandungan terperinci Buat suis togol dalam React sebagai komponen yang boleh diguna semula. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!