React:创建一个可重用的开关/切换组件

在 Web 和移动应用程序中,开关或拨动开关让用户可以在一对相反的状态之间进行选择,例如 ON 和 OFF、LIGHT 和 DARK、ACTIVE 和 INACTIVE,并使用不同的外观来指示每个状态。不幸的是,现在,在 2022 年,HTML 和 React 都没有任何本机标签/元素来实现这样的事情。

这篇简洁直接的文章向您展示了如何在 React 中创建可重用的开关组件。我们将在不使用任何第三方库的情况下从头开始构建所有内容。

注意:本教程假设您对 React 和 CSS 有基本的了解

简要概述

创建开关的诀窍是使用隐藏的复选框可见的标签元素。我们将使用此复选框来跟踪开关组件的状态(复选框被选中表示打开,复选框未选中表示关闭)。此外,我们还使用 CSS 来根据复选框的状态设置开关样式。

这个理论可能会让你感到困惑和不清楚。请参阅下面的完整、直观的示例以获得更清晰的信息。

完整的例子

应用预览

在这个例子中,我们将构建一个名为MySwitch的开关组件,它可以被多次重用。它的形状可以是圆形或矩形。关闭时,轨道的背景颜色为灰色。当它打开时,轨道的背景颜色是浅绿色。

在下面的演示中,我们实现了 2 个开关来显示/隐藏橙色框和秘密消息:

React:创建一个可重用的开关/切换组件

步骤

  1. 首先,使用npxcreate-react-app创建一个新的 React 项目。您可以选择任何您想要的名称:
npx create-react-app kindacode-custom-switches

从现在开始,我们将只使用src文件夹中的文件。

2. 创建 MySwitch 组件并设置样式

这一步是本教程的重点。在您的src目录中,添加一个名为components的新文件夹。在此文件夹中,创建 2 个名为MySwitch.jsMySwitch.css的新文件。

MySwitch.js的代码:

// KindaCode.com
// src/components/MySwitch.js

// CSS is very important for our switch component
import './MySwitch.css';

export const MySwitch = ({ value, onChange, rounded }) => {
  return (
    <>
      <label className='my-switch'>
        <input type='checkbox' checked={value} onChange={onChange} />
        <span className={`slider ${rounded ? 'rounded' : ''}`}></span>
      </label>
    </>
  );
};

这是MySwitch.css中的 CSS 代码:

/* src/components/MySwitch.css */
.my-switch {
  position: relative;
  display: inline-flex;
  width: 60px;
  height: 32px;
}

.my-switch input {
  width: 0;
  height: 0;
}

/* The slider/track of the switch */
.slider {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  cursor: pointer;
  background-color: #ccc;
  transition: 0.4s;
}

/* The thumb of the switch */
.slider:before {
  position: absolute;
  content: '';
  height: 25px;
  width: 25px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  transition: 0.4s;
}

/* Style the slider when the switch is ON (the checkbox is checked) */
.my-switch input:checked + .slider {
  background-color: #4caf50;
}

.my-switch input:checked + .slider:before {
  -webkit-transform: translateX(25px);
  -ms-transform: translateX(25px);
  transform: translateX(25px);
}

/* Rounded switch */
.slider.rounded {
  border-radius: 32px;
}

.slider.rounded:before {
  border-radius: 50%;
}
  1. 现在,是时候使用我们的自定义开关组件了。

在您的src/App.js文件中,删除所有默认代码并添加以下内容:

// KindaCode.com
// src/App.js
import { useState } from 'react';
import './App.css';

import { MySwitch } from './components/MySwitch';

function App() {
  // state for the first swtich
  const [valueOne, setValueOne] = useState(true);

  // state for the second swtich
  const [valueTwo, setValueTwo] = useState(false);

  // this function is called when the first switch is toggled
  const handleChangeOne = () => {
    setValueOne(!valueOne);
  };

  // this function is called when the second switch is toggled
  const handleChangeTwo = () => {
    setValueTwo(!valueTwo);
  };

  return (
    <div className='container'>
      <h2>KindaCode.com - Custom Switches</h2>
      <div className='card'>
        <span>Show the box?</span>
        <MySwitch value={valueOne} onChange={handleChangeOne} rounded={true} />
      </div>

      <div className='card'>
        <span>Reveal the secret?</span>
        <MySwitch value={valueTwo} onChange={handleChangeTwo} rounded={false} />
      </div>

      {valueOne && <div className='box'></div>}
      {valueTwo && <div className='secret'>1 + 1 = 2</div>}
    </div>
  );
}

export default App;

最后,将src/App.css中自动生成的代码替换为:

/* KindaCode.com */
/* src/App.css */
.container {
  width: 80%;
  margin: 40px auto;
}

.card {
  margin: 30px 0;
  padding: 10px 25px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: rgba(0, 0, 0, 0.04);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  border-radius: 10px;
}

.box {
  margin: 30px 0;
  width: 300px;
  height: 100px;
  background: orange;
}

.secret {
  font-size: 40px;
  font-weight: bold;
  font-style: italic;
  color: blue;
}
  1. 启动应用程序:
npm start

最后的话

恭喜!你做到了,一个坚固的开关组件。您可以复制 2 个文件:MySwitch.jsMySwitch.css, 并将它们重用于其他项目。尝试修改代码,更改一些 CSS 值,看看接下来会发生什么。这是学习编程的最好和最有效的方法之一。

免责声明:
1.本站所有内容由本站原创、网络转载、消息撰写、网友投稿等几部分组成。
2.本站原创文字内容若未经特别声明,则遵循协议CC3.0共享协议,转载请务必注明原文链接。
3.本站部分来源于网络转载的文章信息是出于传递更多信息之目的,不意味着赞同其观点。
4.本站所有源码与软件均为原作者提供,仅供学习和研究使用。
5.如您对本网站的相关版权有任何异议,或者认为侵犯了您的合法权益,请及时通知我们处理。
火焰兔 » React:创建一个可重用的开关/切换组件