构建可复用的React开关切换组件

在本文中，我们将创建一个受iOS启发的React开关切换组件。这是一个小巧、独立的组件，可以在未来的项目中复用。同时，我们还将构建一个简单的演示React应用，使用我们自定义的开关切换组件。

尽管可以使用第三方库，但从零开始构建组件能让我们更好地理解代码工作原理，并完全自定义组件。

传统上，复选框用于收集二进制数据，例如是/否、真/假、启用/禁用、开/关等。尽管一些现代界面设计在创建开关切换时避免使用表单字段，但出于更好的可访问性，本文将坚持使用它们。

以下是我们将构建的组件截图：

关键要点

使用Create React App快速设置新的React应用程序，并构建可复用的iOS风格开关切换组件。
利用SCSS为开关切换设计样式，确保视觉吸引力并符合现代设计标准。
将开关切换实现为React中的受控组件，使用props动态管理其状态和行为。
通过使开关切换键盘可访问并使用适当的ARIA属性来增强可访问性。
使用PropTypes进行组件内的类型检查，确保传递所需数据且类型正确。
通过合并SCSS变量和媒体查询来探索高级主题和响应性，以适应不同设备上的开关切换外观。

步骤1 – 创建React应用

使用Create React App快速启动并运行开关切换React组件。如果不熟悉Create React App，请查看我们的入门指南。

1

create-react-app toggleswitch

安装完成后，切换到新创建的目录并使用yarn start（或npm start）启动服务器。这将在http://localhost:3000启动开发服务器。

接下来，在src目录中创建ToggleSwitch目录。我们将在此处制作组件：

1

mkdir src/ToggleSwitch

在此目录中，创建两个文件：ToggleSwitch.js和ToggleSwitch.scss：

1

touch ToggleSwitch.js ToggleSwitch.scss

最后，修改App.js如下：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10


import React from 'react';
import ToggleSwitch from './ToggleSwitch/ToggleSwitch'

function App() {
  return (
    <ToggleSwitch />
  );
}

export default App;

步骤2 – 标记

我们可以从为React开关组件设置基本的HTML复选框输入表单元素及其必要属性开始。

1

<input type="checkbox" name="name" id="id" />

然后，在其周围添加一个封闭的<div>标签，并在<input>标签下方添加一个<label>标签，创建一个显示“Toggle Me!”的标签：

1
2
3
4
5
6


<div class="toggle-switch">
  <input type="checkbox" class="toggle-switch-checkbox" name="toggleSwitch" id="toggleSwitch" />
  <label class="toggle-switch-label" for="toggleSwitch">
    Toggle Me!
  </label>
</div>

添加所有内容后，您应该得到类似这样的内容：

我们也可以去掉标签文本，使用<label>标签本身来勾选或取消勾选复选框输入控件。为此，在<label>标签内添加两个<span>标签来构建开关支架和切换开关：

1
2
3
4
5
6
7


<div class="toggle-switch">
  <input type="checkbox" class="toggle-switch-checkbox" name="toggleSwitch" id="toggleSwitch" />
  <label class="toggle-switch-label" for="toggleSwitch">
    <span class="toggle-switch-inner"></span>
    <span class="toggle-switch-switch"></span>
  </label>
</div>

步骤3 – 转换为React组件

现在我们知道HTML中需要包含什么，只需将HTML转换为React组件。让我们从一个基本组件开始。我们将使其成为一个类组件，然后将其转换为钩子，因为在构建React开关按钮时，新开发人员更容易理解state而不是useState。

将以下内容添加到我们在步骤1中创建的src/ToggleSwitch/ToggleSwitch.js文件中。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22


import React, { Component } from "react";

class ToggleSwitch extends Component {
  render() {
    return (
      <div className="toggle-switch">
        <input
          type="checkbox"
          className="toggle-switch-checkbox"
          name="toggleSwitch"
          id="toggleSwitch"
        />
        <label className="toggle-switch-label" htmlFor="toggleSwitch">
          <span className="toggle-switch-inner" />
          <span className="toggle-switch-switch" />
        </label>
      </div>
    );
  }
}

export default ToggleSwitch;

此时，由于id的重复，不可能在同一视图或页面上有多个开关滑块。尽管我们可以利用React的组件化方式，但我们将使用props动态填充值：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22


import React, { Component } from 'react';

class ToggleSwitch extends Component {
  render() {
    return (
      <div className="toggle-switch">
        <input
          type="checkbox"
          className="toggle-switch-checkbox"
          name={this.props.Name}
          id={this.props.Name}
        />
        <label className="toggle-switch-label" htmlFor={this.props.Name}>
          <span className="toggle-switch-inner" />
          <span className="toggle-switch-switch" />
        </label>
      </div>
    );
  }
}

export default ToggleSwitch;

this.props.Name将动态填充id、name和for（注意在React JS中是htmlFor）的值，以便您可以向组件传递不同的值并在同一页面上有多个实例。

如果您注意到，<span>标签没有结束的</span>标签。相反，它在开始标签中关闭，如<span />，这在JSX中是完全没问题的。

您可以通过使用以下代码更新App.js来测试此组件。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10


function App() {
  return (
    <>
      <ToggleSwitch Name='newsletter' />
      <ToggleSwitch Name='daily' />
      <ToggleSwitch Name='weekly' />
      <ToggleSwitch Name='monthly' />
    </>
  );
}

在http://localhost:3000/检查输出（可能使用浏览器的开发工具）并确保一切正常工作。

步骤4 – 样式和SCSS

我最近写了一篇关于样式化React组件的文章，比较了各种可能的方法。在那篇文章中，我得出结论，SCSS是最好的方法，我们将在这里使用它。

要使SCSS与Create React App一起工作，您需要安装sass包。

注意：以前，许多开发人员使用node-sass。但是，node-sass库已被弃用，建议使用sass或sass-embedded。

1

yarn add node-sass

我们还需要将正确的文件导入到我们的组件中：

1
2
3
4
5


// ToggleSwitch.js

import React, { Component } from 'react';
import './ToggleSwitch.scss';
...

现在是样式。这是我们为React开关按钮设计的样式的大致轮廓。

默认情况下，开关只有75px宽，并垂直对齐为inline-block，以便与文本内联且不会引起布局问题。

我们将确保控件不可选择，以便用户无法拖放它。

我们将隐藏原始复选框输入。

::after和::before伪元素都需要样式化并制成元素，以便将它们放入DOM并样式化它们。

我们还将添加一些CSS过渡以获得酷炫的动画效果。

这是在SCSS中的样子。将以下内容添加到src/ToggleSwitch/ToggleSwitch.scss：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84


.toggle-switch {
  position: relative;
  width: 75px;
  display: inline-block;
  vertical-align: middle;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  text-align: left;
  &-checkbox {
    display: none;
  }
  &-label {
    display: block;
    overflow: hidden;
    cursor: pointer;
    border: 0 solid #bbb;
    border-radius: 20px;
    margin: 0;
  }
  &-inner {
    display: block;
    width: 200%;
    margin-left: -100%;
    transition: margin 0.3s ease-in 0s;
    &:before,
    &:after {
      display: block;
      float: left;
      width: 50%;
      height: 34px;
      padding: 0;
      line-height: 34px;
      font-size: 14px;
      color: white;
      font-weight: bold;
      box-sizing: border-box;
    }
    &:before {
      content: "Yes";
      text-transform: uppercase;
      padding-left: 10px;
      background-color: #f90;
      color: #fff;
    }
  }
  &-disabled {
    background-color: #ddd;
    cursor: not-allowed;
    &:before {
      background-color: #ddd;
      cursor: not-allowed;
    }
  }
  &-inner:after {
    content: "No";
    text-transform: uppercase;
    padding-right: 10px;
    background-color: #bbb;
    color: #fff;
    text-align: right;
  }
  &-switch {
    display: block;
    width: 24px;
    margin: 5px;
    background: #fff;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 40px;
    border: 0 solid #bbb;
    border-radius: 20px;
    transition: all 0.3s ease-in 0s;
  }
  &-checkbox:checked + &-label {
    .toggle-switch-inner {
      margin-left: 0;
    }
    .toggle-switch-switch {
      right: 0px;
    }
  }
}

现在，再次在http://localhost:3000/运行服务器，您将看到四个样式精美的开关切换。尝试切换它们；它们都应该工作。

另外，花点时间浏览上面的代码。如果有任何不确定的地方，可以查阅Sass文档，或在SitePoint论坛提问。

动态标签

目前，切换选项是硬编码的：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16


.toggle-switch {
  ...
  &-inner {
    ...
    &:before {
      content: "Yes";
      ...
    }
  }
  ...
  &-inner:after {
    content: "No";
    ...
  }
  ...
}

为了使组件更灵活，我们可以使用HTML5 data-attributes从控件中动态获取这些：

1
2
3
4
5
6
7
8


&:before {
  content: attr(data-yes);
  ...
}
&-inner:after {
  content: attr(data-no);
  ...
}

我们将硬编码数据属性进行测试，但将在最终版本中使其更灵活：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15


// ToggleSwitch.js

class ToggleSwitch extends Component {
  render() {
    return (
      <div className="toggle-switch">
        ...
        <label className="toggle-switch-label" htmlFor={this.props.Name}>
          <span className="toggle-switch-inner" data-yes="Ja" data-no="Nein"/>
          <span className="toggle-switch-switch" />
        </label>
      </div>
    );
  }
}

如果运行应用程序，您应该看到类似这样的内容：

步骤6 – 创建较小版本的组件

此外，为较小屏幕使用没有文本的较小版本开关组件React将是一个好主意。因此，让我们添加一些最小尺寸的样式并移除文本：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19


.toggle-switch {
  ...
  &.small-switch {
    width: 40px;
    .toggle-switch-inner {
      &:after,
      &:before {
        content: "";
        height: 20px;
        line-height: 20px;
      }
    }
    .toggle-switch-switch {
      width: 16px;
      right: 20px;
      margin: 2px;
    }
  }
}

关于响应性，我们应该改变完整尺寸，因此让我们使用CSS缩放函数。这里我们涵盖了所有基于Bootstrap的设备响应宽度。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12


.toggle-switch {
  ...
  @media screen and (max-width: 991px) {
    transform: scale(0.9);
  }
  @media screen and (max-width: 767px) {
    transform: scale(0.825);
  }
  @media screen and (max-width: 575px) {
    transform: scale(0.75);
  }
}

您可以通过将small-switch类添加到ToggleSwitch.js中的父<div>元素来测试这些更改：

1
2
3
4
5
6
7
8
9


class ToggleSwitch extends Component {
  render() {
    return (
      <div className="toggle-switch small-switch">
        ...
      </div>
    );
  }
}

返回开发服务器并测试您的更改。如果您想对照完成的SCSS文件检查您的内容，可以在这里找到。

步骤6 – SCSS中的主题

由于我们可以在SCSS中使用变量，因此更容易添加对多颜色主题的支持。您可以在“Sass Theming: The Never Ending Story”中阅读更多关于此的内容。我们将在这里使用一些颜色主题，并将所有原始颜色更改为变量。前三行是一组可配置的颜色，帮助我们为主题化我们的小控件：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41


// Colors
$label-colour: #bbb;
$disabled-colour: #ddd;
$toggle-colour: #2F855A;
$white: #fff;

// Styles
.toggle-switch {
  ...
  &-label {
    ...
    border: 0 solid $label-colour;
  }
  &-inner {
    ...
    &:before {
      ...
      background-color: $toggle-colour;
      color: $white;
    }
  }
  &-disabled {
    background-color: $disabled-colour;
    cursor: not-allowed;
    &:before {
      background-color: $disabled-colour;
      cursor: not-allowed;
    }
  }
  &-inner:after {
    ...
    background-color: $label-colour;
    color: $white;
  }
  &-switch {
    ...
    background: $white;
    border: 0 solid $label-colour;
  }
  ...
}

样式就到这里。现在让我们添加一些交互性。

步骤7 – 交互和JavaScript

请注意，以下部分仅包含解释概念的演示代码。您不应在此部分更新实际的ToggleSwitch组件。

我们的基本组件将是一个哑组件（或展示组件），其状态将由父组件或容器（如表单）控制。受控是什么意思？好吧，让我们先看一个非受控版本：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12


import React from 'react';

const ToggleSwitch = () => (
  <div>
    <input
      type="checkbox"
      className="toggle-switch-checkbox"
    />
  </div>
);

export default ToggleSwitch;

当用户与上述复选框输入交互时，它将在选中和未选中状态之间自行切换，而无需我们编写任何JavaScript。HTML输入元素可以通过直接更新DOM来管理自己的内部状态。

然而，在React中，建议使用受控组件，如下例所示：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13


import React from 'react';

const ToggleSwitch = ({checked}) => (
  <div>
    <input
      type="checkbox"
      className="toggle-switch-checkbox"
      checked={checked}
    />
  </div>
);

export default ToggleSwitch;

这里，React控制复选框输入的状态。与此输入的所有交互都必须通过虚拟DOM进行。如果您尝试按原样与组件交互，什么也不会发生，因为我们没有定义任何可以更改传入的checked prop值的JavaScript代码。

要解决此问题，我们可以传入一个onChange prop——一个在单击复选框时调用的函数：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14


import React from 'react';

const ToggleSwitch = ({checked, onChange}) => (
  <div>
    <input
      type="checkbox"
      className="toggle-switch-checkbox"
      checked={checked}
      onChange={e => onChange(e.target.checked)}
    />
  </div>
);

export default ToggleSwitch;

现在，复选框输入是交互式的。用户可以像以前一样切换组件“开”和“关”。这里唯一的区别是状态由React控制，而不是之前的非受控版本。这使我们能够通过JavaScript在任何给定时间轻松访问组件的状态。我们还可以在声明组件时轻松定义初始值。

现在，让我们看看如何在ToggleSwitch组件中使用它。以下是一个简化的基于类的示例：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17


import React, { Component } from 'react';

class Form extends Component {
  state = { checked : false }

  onChange = newValue => {
    this.setState({ checked: newValue });
  }

  render() {
    return (
      <ToggleSwitch id="toggleSwitch" checked={this.checked} onChange={this.onChange} />
    );
  }
}

export default Form;

现在让我们使用钩子将基于类的组件转换为功能组件：

1
2
3
4
5
6
7
8
9


import React, { useState } from 'react';

export default function Form() {
  let [checked, setChecked] = useState(false);

  return (
    <ToggleSwitch id="toggleSwitch" checked={checked} onChange={setChecked} />
  )
}

如您所见，使用功能组件和钩子创建方法，我们大大减少了行数。

如果React Hooks对您来说是新的，请查看“React Hooks: How to Get Started & Build Your Own”。

步骤8 – 完成ToggleSwitch组件

现在，让我们回到我们的ToggleSwitch组件。我们需要以下props：

id（必需）：这将传递给复选框输入控件的ID。没有它，组件将无法