Menguasai Kotak Semak React: Panduan Lengkap

Kotak Semak React bukan sekadar input asas; ia adalah alat serba boleh untuk menambahkan interaktiviti pada borang. React menjadikan pengurusan keadaan kotak pilihan lancar, membolehkan anda menangkap pilihan pengguna dan menogol pilihan dengan mudah. Dalam panduan ini, kami akan merangkumi kotak pilihan pemaparan dalam JSX, keadaan pengendalian dan menyesuaikan fungsi untuk membina borang yang menarik dan responsif.

Mencipta Kotak Semak React

Mari mulakan dengan membuat kotak semak asas tanpa sebarang keadaan, kemudian kami akan menambah keadaan untuk menjadikannya interaktif dan membincangkan faedahnya.

Langkah 1: Mencipta Kotak Semak Asas dalam React

Pada terasnya, kotak semak tindak balas hanyalah elemen input dengan atribut jenis ditetapkan kepada "kotak pilihan." Begini cara kita boleh membuat kotak semak asas dalam React tanpa sebarang keadaan:

import React from 'react';

function App() {
  return (
    <div>
      <label>
        <input type="checkbox" />
        Accept Terms and Conditions
      </label>
    </div>
  );
}

export default App;

Dalam persediaan ini, kami memaparkan kotak pilihan dengan label. Walaupun ia muncul dalam UI, ia tidak berfungsi dalam cara khusus React, kerana ia tidak mempunyai sebarang keadaan untuk menjejaki sama ada ia ditandakan atau dinyahtandai.

Langkah 2: Menambah Keadaan pada Kotak Semak

Untuk menjadikan kotak pilihan berfungsi, kami perlu menambah keadaan. Cangkuk useState React membolehkan kami mengurus keadaan kotak semak ini dan menjejaki sama ada ia ditandakan. Begini cara kami boleh menambahkannya:

import React, { useState } from 'react';
function App() {
  const [isChecked, setIsChecked] = useState(false);
  const handleCheckboxChange = () => {
    setIsChecked(!isChecked);
  };
  return (
    <div>
      <label>
        <input
          type="checkbox"
          checked={isChecked}
          onChange={handleCheckboxChange}
        />
        Accept Terms and Conditions
      </label>
      <p>{isChecked ? "Checkbox is checked" : "Checkbox is unchecked"}</p>
    </div>
  );
}
export default App;

Tetapi Mengapa Kami Menambah Negeri?

Dengan keadaan, kami mendapat kawalan penuh ke atas kelakuan kotak pilihan:

• Kami boleh menentukan sama ada ia ditanda atau tidak ditanda berdasarkan isChecked.
• Dengan menjejaki keadaan ini, kami boleh mengemas kini bahagian UI yang lain secara dinamik bergantung pada keadaan kotak pilihan. Dalam contoh ini, mesej menunjukkan sama ada kotak pilihan ditandakan atau tidak.
• Pendekatan ini berguna untuk borang, togol dan elemen interaktif yang apl perlu bertindak balas kepada input pengguna.

Langkah 3: Mencipta Komponen Kotak Semak Reaksi Boleh Digunakan Semula

Akhir sekali, mari tukar fungsi ini kepada komponen kotak semak boleh guna semula yang boleh disesuaikan merentas apl.

import React, { useState } from 'react';


// Reusable Checkbox Component
function Checkbox({ label, onChange }) {
  const [isChecked, setIsChecked] = useState(false);


  const handleChange = () => {
    setIsChecked(!isChecked);
    onChange(!isChecked); // Pass the updated state to the parent component
  };


  return (
    <label>
      <input
        type="checkbox"
        checked={isChecked}
        onChange={handleChange}
      />
      {label}
    </label>
  );
}


// Using the Reusable Checkbox Component
function App() {
  const handleCheckboxState = (state) => {
    console.log('Checkbox State:', state);
  };


  return (
    <div>
      <Checkbox label="Accept Terms and Conditions" onChange={handleCheckboxState} />
    </div>
  );
}


export default App;

Kotak Semak Reaksi Tersuai menggunakan UI Bahan

UI Bahan (MUI) menyediakan komponen Kotak Semak serba boleh yang membolehkan kami melangkaui penggayaan lalai dan menyesuaikan kotak pilihan dengan keperluan reka bentuk khusus projek kami. Dengan MUI, kami boleh menukar warna, menambah ikon dan melaraskan gaya dengan mudah, sambil mengekalkan fungsi yang konsisten.

Kotak Semak Asas

Mencipta kotak semak asas dalam React adalah mudah tetapi penting untuk menangkap input pengguna. Menggunakan keadaan React, kita boleh mengawal sama ada ia ditandakan atau dinyahtandai.

import React from 'react';

function App() {
  return (
    <div>
      <label>
        <input type="checkbox" />
        Accept Terms and Conditions
      </label>
    </div>
  );
}

export default App;

Label

Untuk menambah label pada Kotak Semak, anda boleh menggunakan komponen FormControlLabel UI Bahan. Ini membolehkan anda memaparkan teks dengan mudah di sebelah kotak pilihan, meningkatkan kejelasan dan kebolehcapaian untuk pengguna.

import React, { useState } from 'react';
function App() {
  const [isChecked, setIsChecked] = useState(false);
  const handleCheckboxChange = () => {
    setIsChecked(!isChecked);
  };
  return (
    <div>
      <label>
        <input
          type="checkbox"
          checked={isChecked}
          onChange={handleCheckboxChange}
        />
        Accept Terms and Conditions
      </label>
      <p>{isChecked ? "Checkbox is checked" : "Checkbox is unchecked"}</p>
    </div>
  );
}
export default App;

Saiz

Untuk melaraskan saiz kotak pilihan, anda boleh menggunakan prop saiz atau menyesuaikan saiz fon ikon SVG dalam kotak pilihan. Ini membolehkan anda memadankan saiz kotak pilihan dengan reka bentuk anda, menjadikannya lebih mudah disesuaikan dengan pelbagai reka letak.

import React, { useState } from 'react';


// Reusable Checkbox Component
function Checkbox({ label, onChange }) {
  const [isChecked, setIsChecked] = useState(false);


  const handleChange = () => {
    setIsChecked(!isChecked);
    onChange(!isChecked); // Pass the updated state to the parent component
  };


  return (
    <label>
      <input
        type="checkbox"
        checked={isChecked}
        onChange={handleChange}
      />
      {label}
    </label>
  );
}


// Using the Reusable Checkbox Component
function App() {
  const handleCheckboxState = (state) => {
    console.log('Checkbox State:', state);
  };


  return (
    <div>
      <Checkbox label="Accept Terms and Conditions" onChange={handleCheckboxState} />
    </div>
  );
}


export default App;

ikon

Sesuaikan penampilan kotak pilihan dengan menukar ikon lalainya. Dengan ikon dan prop Ikon yang ditandai, anda boleh menggantikan ikon kotak pilihan standard dengan mana-mana ikon SVG atau UI Bahan tersuai.

import * as React from 'react';
import Checkbox from '@mui/material/Checkbox';


const label = { inputProps: { 'aria-label': 'Checkbox demo' } };


export default function Checkboxes() {
  return (
    <div>
      <Checkbox {...label} defaultChecked />
      <Checkbox {...label} />
      <Checkbox {...label} disabled />
      <Checkbox {...label} disabled checked />
    </div>
  );
}

Tidak tentu

Dalam borang, kotak pilihan biasanya mempunyai dua keadaan: ditandai atau dinyahtandai. Walau bagaimanapun, secara visual, terdapat keadaan ketiga — tak tentu — berguna untuk menunjukkan pemilihan separa (seperti apabila hanya beberapa item dalam senarai dipilih). Anda boleh menetapkan kotak pilihan kepada keadaan tak tentu dengan prop tak tentu dan menyesuaikan penampilannya menggunakan prop Ikon tak tentu, memudahkan pengguna memahami pilihan separa.

import * as React from 'react';
import FormGroup from '@mui/material/FormGroup';
import FormControlLabel from '@mui/material/FormControlLabel';
import Checkbox from '@mui/material/Checkbox';


export default function CheckboxLabels() {
  return (
    <FormGroup>
      <FormControlLabel control={<Checkbox defaultChecked />} label="Label" />
      <FormControlLabel required control={<Checkbox />} label="Required" />
      <FormControlLabel disabled control={<Checkbox />} label="Disabled" />
    </FormGroup>
  );
}

Ini hanyalah beberapa pilihan tersedia yang ditawarkan oleh MUI. Hampir tiada had untuk jumlah penyesuaian yang boleh kami lakukan pada kotak semak untuk menjadikannya sepadan dengan keperluan projek kami dengan sempurna.

Kesimpulan

Kotak Semak React ialah alat yang berkuasa untuk mencipta borang interaktif. Kami bermula dengan kotak semak asas, menambah keadaan untuk mengawal fungsi, dan kemudian membina komponen boleh guna semula. Komponen Kotak Semak UI Bahan membenarkan penyesuaian lanjut, membolehkan pelarasan pada warna, saiz, label dan ikon, bersama-sama dengan keadaan tidak tentu untuk pilihan yang kompleks. Dengan pilihan ini, anda boleh menyesuaikan kotak pilihan dengan mudah agar sesuai dengan keperluan projek.

Untuk butiran lanjut, lihat dokumentasi Kotak Semak UI Bahan rasmi.

Atas ialah kandungan terperinci Menguasai Kotak Semak React: Panduan Lengkap. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!