ReactJS 是一個用於建立使用者介面的流行 JavaScript 函式庫，它提供了開發互動式元件的有效方法。切換開關經常用於允許使用者在 Web 應用程式中在深色模式和淺色模式主題之間切換。切換開關也可用於顯示或隱藏頁面的特定內容或部分。在本文中，我們將探討如何使用 ReactJS 建立切換開關。
在繼續本教學之前，假設您對 ReactJS 有基本的了解，並且已經設定了安裝了 Node.js 和 npm 的開發環境。
首先，讓我們使用 Create React App 建立一個新的 React 應用程式。開啟命令提示字元並執行以下命令：
npx create-react-app toggle-slider-switch
此指令將建立一個名為「toggle-slider-switch」的新目錄，並在其中設定一個基本的 React 應用程式。若要導航至專案目錄，請撰寫以下命令。
cd toggle-slider-switch
在專案的 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;
在同一目錄 (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);
}
接下來，讓我們修改 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;
現在，我們可以運行我們的切換開關應用程式。在命令提示字元中，確保您位於專案的根目錄中（切換滑桿開關）。執行以下命令啟動React開發伺服器：
編譯過程完成後，您的預設瀏覽器將會打開，您應該會在螢幕上看到標題「Toggle Slider Example」以及切換滑桿。
npm start
點擊切換滑桿將切換其狀態並變更其外觀。 ToggleSlider 元件中的初始狀態設定為“false”，因此當您按一下滑桿時，它會變成藍色，表示“true”狀態。再次點擊，將返回初始狀態。
在本文中，我們討論如何在 Reactjs 中建立開關。我們介紹了逐步過程，包括設定 React 應用程式、建立切換滑桿元件、設定滑桿樣式、實作元件以及執行應用程式。透過遵循本指南，您現在應該在 ReactJS 應用程式中擁有一個功能切換滑桿開關，準備進一步自訂並整合到您的專案中。
以上是如何在 ReactJS 中建立 Switch？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
