ReactJS 是一個用于構建用戶界面的流行 JavaScript 庫，它提供了開發(fā)交互式組件的有效方法。切換開關經(jīng)常用于允許用戶在 Web 應用程序中在深色模式和淺色模式主題之間切換。切換開關還可用于顯示或隱藏頁面的特定內(nèi)容或部分。在本文中，我們將探討如何使用 ReactJS 創(chuàng)建切換開關。
先決條件
在繼續(xù)本教程之前，假設您對 ReactJS 有基本的了解，并且已經(jīng)設置了安裝了 Node.js 和 npm 的開發(fā)環(huán)境。
設置 React 應用程序并安裝所需的庫
首先，讓我們使用 Create React App 創(chuàng)建一個新的 React 應用程序。打開命令提示符并運行以下命令：
npx create-react-app toggle-slider-switch
登錄后復制
此命令將創(chuàng)建一個名為“toggle-slider-switch”的新目錄，并在其中設置一個基本的 React 應用程序。要導航到項目目錄，請編寫以下命令。
cd toggle-slider-switch
登錄后復制
第 2 步：創(chuàng)建 ToggleSlider 組件
在項目的 src 目錄中，創(chuàng)建一個名為 ToggleSlider.js 的新文件。該文件將包含我們的切換滑塊組件代碼。在您喜歡的文本編輯器中打開 ToggleSlider.js 文件并添加以下代碼：
示例
在下面的代碼中，我們從 React 導入了 useState 鉤子，它允許我們處理功能組件中的狀態(tài)。我們定義一個 ToggleSlider 組件，它使用檢查的變量維護開關的狀態(tài)。 handleToggle 函數(shù)負責在單擊開關時更新狀態(tài)。
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) 中創(chuàng)建一個名為 ToggleSlider.css 的新文件。添加以下 CSS 代碼來設置切換滑塊的樣式：
示例
在下面的代碼中，CSS 代碼設置了切換滑塊的樣式，包括開關及其滑塊手柄。 input[type=’checkbox’] 被隱藏，我們使用標簽來觸發(fā)切換效果。
.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 步：實現(xiàn) ToggleSlider 組件
接下來，讓我們修改 src 目錄中的 App.js 文件以包含我們的 ToggleSlider 組件。打開 App.js 文件并使用以下代碼更新其內(nèi)容
示例
在下面的代碼中，我們導入 ToggleSlider 組件并將其呈現(xiàn)在 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 應用
現(xiàn)在，我們可以運行我們的切換開關應用程序。在命令提示符中，確保您位于項目的根目錄中（切換滑塊開關）。運行以下命令啟動React開發(fā)服務器：
編譯過程完成后，您的默認瀏覽器將打開，您應該在屏幕上看到標題“Toggle Slider Example”以及切換滑塊。
npm start
登錄后復制
第 6 步：測試切換滑塊
單擊切換滑塊將切換其狀態(tài)并更改其外觀。 ToggleSlider 組件中的初始狀態(tài)設置為“false”，因此當您單擊滑塊時，它會變成藍色，表示“true”狀態(tài)。再次點擊，將返回初始狀態(tài)。
輸出
登錄后復制
結論
在本文中，我們討論了如何在 Reactjs 中創(chuàng)建開關。我們介紹了分步過程，包括設置 React 應用程序、創(chuàng)建切換滑塊組件、設置滑塊樣式、實現(xiàn)組件以及運行應用程序。通過遵循本指南，您現(xiàn)在應該在 ReactJS 應用程序中擁有一個功能切換滑塊開關，準備進一步自定義并集成到您的項目中。
以上就是如何在 ReactJS 中創(chuàng)建 Switch？的詳細內(nèi)容，更多請關注www.92cms.cn其它相關文章！
