如何在 ReactJS 中建立 Switch？

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 元件，它使用檢查的變數維護開關的狀態。 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 應用程式

現在，我們可以運行我們的切換開關應用程式。在命令提示字元中，確保您位於專案的根目錄中（切換滑桿開關）。執行以下命令啟動React開發伺服器：

編譯過程完成後，您的預設瀏覽器將會打開，您應該會在螢幕上看到標題「Toggle Slider Example」以及切換滑桿。

npm start

第 6 步：測試切換滑桿

點擊切換滑桿將切換其狀態並變更其外觀。 ToggleSlider 元件中的初始狀態設定為“false”，因此當您按一下滑桿時，它會變成藍色，表示“true”狀態。再次點擊，將返回初始狀態。

輸出

結論

在本文中，我們討論如何在 Reactjs 中建立開關。我們介紹了逐步過程，包括設定 React 應用程式、建立切換滑桿元件、設定滑桿樣式、實作元件以及執行應用程式。透過遵循本指南，您現在應該在 ReactJS 應用程式中擁有一個功能切換滑桿開關，準備進一步自訂並整合到您的專案中。

以上是如何在 ReactJS 中建立 Switch？的詳細內容。更多資訊請關注PHP中文網其他相關文章！