如何在ReactJS中建立開關？

---

ReactJS是一個流行的JavaScript庫，用於構建使用者介面，它提供了一種有效的方法來開發互動式元件。切換開關經常用於允許使用者在Web應用程式中在深色模式和淺色模式主題之間切換。切換開關也可以用於顯示或隱藏頁面的特定內容或部分。在本文中，我們將探討如何使用ReactJS建立切換開關。

前提條件

在繼續本教程之前，假設您已經對ReactJS有基本的瞭解，並且已經設定了包含已安裝Node.js和npm的開發環境。

設定React應用程式並安裝所需的庫

首先，讓我們使用Create React App建立一個新的React應用程式。開啟您的命令提示符並執行以下命令：

npx create-react-app toggle-slider-switch

此命令將建立一個名為toggle-slider-switch的新目錄，並在其中設定一個基本的React應用程式。要導航到專案目錄，請編寫以下命令。

cd toggle-slider-switch

步驟2：建立ToggleSlider元件

在專案的src目錄中，建立一個名為ToggleSlider.js的新檔案。此檔案將包含我們的切換滑塊元件程式碼。在您喜歡的文字編輯器中開啟ToggleSlider.js檔案，並新增以下程式碼：

示例

在下面的程式碼中，我們從React匯入useState鉤子，這允許我們在函式元件中處理狀態。我們定義了一個ToggleSlider元件，該元件使用checked變數維護開關的狀態。handleToggle函式負責在單擊開關時更新狀態。

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;

步驟3：設定切換滑塊的樣式

在同一目錄(src)中建立一個名為ToggleSlider.css的新檔案。新增以下CSS程式碼來設定我們的切換滑塊的樣式：

示例

在下面的程式碼中，CSS程式碼設定切換滑塊的樣式，包括開關及其滑塊控制代碼。input[type='checkbox']是隱藏的，我們使用標籤來觸發切換效果。

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

步驟4：實現ToggleSlider元件

接下來，讓我們修改src目錄中的App.js檔案以包含我們的ToggleSlider元件。開啟App.js檔案並使用以下程式碼更新其內容：

示例

在下面的程式碼中，我們匯入ToggleSlider元件並在App元件中渲染它。這將在螢幕上顯示我們的切換滑塊。

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

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

export default App;

步驟5：執行React應用程式

現在，我們可以執行我們的切換開關應用程式。在您的命令提示符中，確保您位於專案的根目錄(toggle-slider-switch)。執行以下命令以啟動React開發伺服器：

編譯過程完成後，您的預設瀏覽器將開啟，您應該會看到標題“切換滑塊示例”以及螢幕上的切換滑塊。

npm start

步驟6：測試切換滑塊

單擊切換滑塊將切換其狀態並更改其外觀。初始狀態在ToggleSlider元件中設定為“false”，因此當您單擊滑塊時，它將變為藍色，表示“true”狀態。再次單擊它，它將返回到初始狀態。

輸出

結論

在本文中，我們討論瞭如何在ReactJS中建立開關。我們涵蓋了分步過程，包括設定React應用程式、建立切換滑塊元件、設定滑塊樣式、實現元件和執行應用程式。按照本指南操作，您現在應該在ReactJS應用程式中擁有一個功能齊全的切換滑塊開關，可以進一步自定義並整合到您的專案中。