掌握 React 複選框：完整指南

React Checkbox 不只是一個基本輸入；它是一種為表單添加互動性的多功能工具。 React 可以無縫管理複選框的狀態，讓您可以輕鬆捕捉使用者選擇並切換選項。在本指南中，我們將介紹 JSX 中的渲染複選框、處理狀態以及自訂功能以建立引人入勝的響應式表單。

建立反應複選框

讓我們先建立一個沒有任何狀態的基本複選框，然後我們將新增狀態以使其具有互動性並討論其好處。

第 1 步：在 React 中建立一個基本複選框

從本質上講，React 複選框只是一個 type 屬性設定為「checkbox」的輸入元素。以下是我們如何在 React 中建立一個沒有任何狀態的基本複選框：

import React from 'react';

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

export default App;

在此設定中，我們顯示一個帶有標籤的複選框。雖然它出現在 UI 中，但它不能以特定於 React 的方式運行，因為它缺乏任何狀態來追蹤它是否已選取或未選取。

第 2 步：向複選框新增狀態

為了讓複選框發揮作用，我們需要新增狀態。 React 的 useState 鉤子允許我們管理這個複選框的狀態並追蹤它是否被選中。新增方法如下：

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;

但為什麼我們要新增一個狀態呢？

透過狀態，我們可以完全控制複選框的行為：

• 我們可以根據isChecked判斷是否選取。
• 透過追蹤此狀態，我們可以根據複選框的狀態動態更新 UI 的其他部分。在此範例中，一則訊息顯示該複選框是否已選取。
• 此方法對於應用程式需要回應使用者輸入的表單、切換和互動元素非常有用。

步驟 3：建立可重複使用的 React 複選框元件

最後，讓我們將此功能轉換為可在應用程式中自訂的可重複使用複選框元件。

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;

使用 Material UI 自訂 React 複選框

Material UI (MUI) 提供了一個多功能的複選框元件，使我們能夠超越預設樣式並根據專案的特定設計需求自訂複選框。透過 MUI，我們可以輕鬆更改顏色、新增圖示和調整樣式，同時保持功能一致。

基本複選框

在 React 中建立一個基本的複選框很簡單，但對於捕獲用戶輸入至關重要。使用 React 的狀態，我們可以控制它是選取還是未選取。

import React from 'react';

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

export default App;

標籤

要為複選框新增標籤，可以使用 Material UI 的 FormControlLabel 元件。這使您可以輕鬆地在複選框旁邊顯示文本，從而提高用戶的清晰度和可訪問性。

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;

尺寸

要調整複選框大小，您可以使用 size 屬性或自訂複選框內 SVG 圖示的字體大小。這使您可以將複選框大小與您的設計相匹配，使其更適合各種佈局。

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;

圖示

透過更改預設圖示來自訂複選框外觀。使用 icon 和 checkIcon 屬性，您可以將標準複選框圖示替換為任何自訂 SVG 或 Material UI 圖示。

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

不定

在表單中，複選框通常有兩種狀態：選取或未選取。然而，從視覺上看，還有第三種狀態 - 不確定 - 對於指示部分選擇很有用（例如僅選擇清單中的某些項目時）。您可以使用 infiniteate 屬性將複選框設為不確定狀態，並使用 infiniteateIcon 屬性自訂其外觀，使用戶更容易理解部分選擇。

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

這些只是 MUI 提供的一些可用選項。我們可以對複選框進行的自訂數量幾乎沒有限制，以使它們完全滿足我們的專案需求。

結論

React Checkbox 是建立互動式表單的強大工具。我們從一個基本的複選框開始，新增狀態來控制功能，然後建立一個可重複使用的元件。 Material UI 的 Checkbox 元件允許進一步自訂，可以調整顏色、大小、標籤和圖標，以及複雜選擇的不確定狀態。透過這些選項，您可以輕鬆自訂複選框以滿足任何專案的要求。

更多詳細信息，請查看官方 Material UI Checkbox 文件。

以上是掌握 React 複選框：完整指南的詳細內容。更多資訊請關注PHP中文網其他相關文章！