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 ( );};export default ToggleSlider;
第 3 步：设置切换滑块的样式
在同一目录 (src) 中创建一个名为 ToggleSlider.css 的新文件。添加以下 CSS 代码来设置切换滑块的样式：
阿里妈妈·创意中心
阿里妈妈营销创意中心
0 查看详情 
示例
在下面的代码中，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 ( Toggle Slider Example
);};export default App;
第 5 步：运行 React 应用
现在，我们可以运行我们的切换开关应用程序。在命令提示符中，确保您位于项目的根目录中（切换滑块开关）。运行以下命令启动React开发服务器：
编译过程完成后，您的默认浏览器将打开，您应该在屏幕上看到标题“Toggle Slider Example”以及切换滑块。
npm start
第 6 步：测试切换滑块
单击切换滑块将切换其状态并更改其外观。 ToggleSlider 组件中的初始状态设置为“false”，因此当您单击滑块时，它会变成蓝色，表示“true”状态。再次点击，将返回初始状态。
输出
结论
在本文中，我们讨论了如何在 Reactjs 中创建开关。我们介绍了分步过程，包括设置 React 应用程序、创建切换滑块组件、设置滑块样式、实现组件以及运行应用程序。通过遵循本指南，您现在应该在 ReactJS 应用程序中拥有一个功能切换滑块开关，准备进一步自定义并集成到您的项目中。
以上就是如何在 ReactJS 中创建 Switch？的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/527814.html
微信扫一扫 
支付宝扫一扫 
