如何在 ReactJS 中创建 Switch?

react jsjavascriptfront end technology

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 应用程序中拥有一个功能齐全的切换滑块开关,可以进一步自定义并集成到您的项目中。


相关文章