在React中创建一个切换开关作为可重复使用的组件

在本文中，我们将创建一个iOS启发的切换React组件。这将是一个小的，具有独立的组件，您可以在以后的项目中重复使用。随着我们的使用，我们还将构建一个使用我们自定义切换开关组件的简单演示React应用程序。>

尽管我们可以使用第三方库来为此使用第三方库，但是从头开始构建组件使我们能够更好地了解代码的工作原理并允许我们完全自定义我们的组件。

>该复选框传统上用于收集二进制数据，例如是或否，是或否，启用或禁用，打开或关闭等。由于他们的可访问性更高，在这里与他们在一起。

这是我们要构建的组件的屏幕截图：

>

钥匙要点

>使用Create React应用程序快速设置新的React应用程序并构建可重复使用的iOS启发的切换开关组件。

>利用SCSS来造型开关开关，确保视觉上吸引人并与现代设计标准保持一致。

>使用Props动态管理其状态和行为。 通过使切换开关键盘可访问并使用适当的ARIA属性来增强可访问性。
>利用proptypes在组件中进行类型检查，以确保传递所需的数据并具有正确的类型。>
>通过合并SCSS变量和媒体查询来探索高级主题和响应能力，以调整Twepgle Switch在不同设备上的外观。
• >步骤1 - 创建React App
• >让我们使用Create React应用程序快速获取开关开关React组件启动和运行。如果您不熟悉Create React应用程序，请查看我们的
入门指南
• 。
>。

>安装了所有内容后，更改为新创建的目录，然后以纱线启动（或者愿意的（如果您愿意）启动NPM）。这将启动开发服务器的> http：// localhost：3000

。

接下来，在SRC目录中创建一个TogglesWitch目录。这是我们将制作组件的地方：

在此目录中，制作两个文件：toggleswitch.js and toggleswitch.scss：

create-react-app toggleswitch

>最后，Alter App.js如下：

步骤2 - 标记

我们可以通过为我们的切换react组件设置基本的HTML复选框输入表单元素，具有其必要的属性。>

create-react-app toggleswitch

然后，

，在标签下方添加一个封闭式

标签，标签以创建标签，说明我！

mkdir src/ToggleSwitch

添加所有内容，您应该得到这样的东西：

我们还可以摆脱标签文本，并使用标签本身检查或取消选中复选框输入控件。为此，添加两个标签在标签中以构建开关座和切换开关：

touch ToggleSwitch.js ToggleSwitch.scss

>步骤3 - 转换为React组件

>现在，我们知道需要进入HTML，我们需要做的就是将HTML转换为React组件。让我们从这里从基本组件开始。我们将其制作为类组件，然后将其转换为挂钩，因为在构建React Switch按钮时，新开发人员比

> usestate更容易遵循状态。 >将以下内容添加到我们在步骤1中创建的SRC/toggleswitch/toggleswitch.js文件

在这一点上，由于ID的重复，在同一视图或页面上不可能在同一视图或页面上具有多个切换开关滑块。尽管我们可以在此处利用React的组件化方式，但我们将使用

props

>动态填充值：

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

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

export default App;

>

this.props.name将动态地填充ID，名称和（请注意它是htmlfor）的值，以便您可以将不同的值传递给组件并在同一页面上具有多个实例。

如果注意到，标签没有结尾标签。相反，它在启动标签中关闭，例如，它在jsx

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

中完全很好。

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

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

>步骤4 - 样式和SCSS

<div >
  <input type="checkbox"  name="toggleSwitch"  />
  <label  for="toggleSwitch">
    Toggle Me!
  </label>
</div>

>我最近写了关于样式react组件的文章，在那里我比较了各种方法。在那篇文章中，我得出的结论是，SCSS是最好的方法，这就是我们在这里使用的方法。

>

要使SCS使用Create React应用程序，您需要安装

sass软件包。

note

：以前，许多开发人员使用 node-sass >。但是，现在已经对节点库库进行了弃用，建议使用sass或

sass-embedded

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

create-react-app toggleswitch

>现在进行样式。这是我们对React Switch按钮的样式所追求的粗略轮廓。>

默认情况下，开关仅为75px宽，垂直对齐在inline块中，因此它与文本内联，不会引起布局问题。
• >
我们将确保无法选择控件，以免用户拖放它。>
• 我们将隐藏原始的复选框输入。
• > :: after and :: pseudo elements需要进行样式并制成元素，以使它们进入DOM并造成样式。
• 我们还将添加一些CSS过渡以表现出很酷的动画效果。>
• >这就是SCSS中的样子。将以下内容添加到src/toggleswitch/toggleswitch.scss：>

现在，在

> http：// localhost：3000/

>上再次运行服务器，您将看到四个样式的型切换开关。尝试切换它们；他们都应该工作。

mkdir src/ToggleSwitch

>

>此外，花一段时间浏览上面的代码。如果您不确定任何内容，您可以咨询

sass Documentation，或在

> sitepoint论坛上提出一个问题。

动态标签 当前，切换选项是硬编码的：> 为了使组件更灵活，我们可以使用html5 data-Attributes

从控件中动态获取这些组件：>

>我们将用于测试数据属性，但在最终版本中会更加灵活：

touch ToggleSwitch.js ToggleSwitch.scss

如果您运行了应用程序，则应该看到这样的东西：

>

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

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

export default App;

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

>另外，使用较小版本的开关组件反应而无需用于较小屏幕的文本将是一个好主意。因此，让我们添加一些最小尺寸的样式，然后删除文本：>

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

在响应性方面，我们应该更改完整的大小，因此让我们使用CSS量表功能。在这里，我们介绍了所有基于自动启动的设备的响应宽度。>

您可以通过在toggleswitch.js中的父

元素中添加小切口类来测试这些更改：

>回到开发服务器并测试您的更改。如果您想检查对完成的SCSS文件所拥有的内容，则可以在此处找到

>。

>

步骤6 - SCSS中的主题

>由于我们可以在SCS中使用变量，因此更容易添加对多种颜色主题的支持。您可以在“ sass主题：永无止境的故事”中阅读有关此信息的更多信息。我们将在此处使用一些颜色主题，并将所有原始色彩更改为变量。前三行是一组可配置的颜色，这有助于我们主题我们的小控制：>

create-react-app toggleswitch

就是这样。现在让我们添加一些互动性。

步骤7 - 互动和JavaScript

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

>

>我们的基本组件将是一个愚蠢的组件（或表示组件），其状态将由父组件或容器（例如表单）控制。我们所说的是什么意思？好吧，让我们首先看一个不受控制的版本：

>

mkdir src/ToggleSwitch

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

受控的组件

，如下所示： >在这里，React正在控制复选框输入的状态。与此输入的所有交互都必须通过虚拟DOM。如果您尝试与组件进行交互，那么什么都不会发生，因为我们尚未定义任何可以更改我们传递的已检查道具的值的JavaScript代码。> 为了解决此问题，我们可以通过OnChange Prop传递 - 每当单击复选框时要调用的函数：>

touch ToggleSwitch.js ToggleSwitch.scss

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

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

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

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

export default App;

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

>

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

如果React Hooks对您来说是新的，则“

React Hooks：如何启动并构建您的

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

>”。

>

>步骤8 - 最终确定toggleswitch组件

现在，让我们回到我们的toggleswitch组件。我们需要以下道具：

• ID（必需）：这是将传递给复选框输入控件的ID。没有它，组件就不会渲染。
>
• >检查（必需）：这将保持当前状态，这将是一个布尔值。>
onChange（必需）：触发输入的OnChange事件处理程序时，将调用此功能。>
• 名称（可选）：这将是复选框输入的标签文本，但我们通常不使用它。
小（可选）：此布尔值以小模式呈现切换开关而无需呈现文本。
> OptionLabels（可选）：如果您不使用控件的小版本，则可能需要将其传递给Twoggle Switch作为两个值的数组，这表示True和False的文本。一个示例是text = {[“是”，“否”]}。
• >
禁用（可选）：这将直接传递到。
• 不使用小版本时，以下选项标签文本将用作默认版本：>

>由于大多数道具必须由用户设置，而且我们不能使用任意值，因此，如果未传递所需的道具，最好停止渲染。如果可以使用简单的JavaScript完成此操作，如果语句还是三元运营商使用？ ：或一个短路&&：

随着应用程序的增长，我们可以通过类型检查捕获许多错误。 React具有一些内置的类型检查能力。要运行组件的道具检查类型，您可以分配特殊的PropTypes属性。我们可以使用React's Proptype

create-react-app toggleswitch

库来执行上述道具列表，这是一个单独的库，该库导出了一系列验证器，可用于确保您收到的数据有效。>>>>>>>>>

您可以像这样安装它：

mkdir src/ToggleSwitch

然后，使用以下方式导入PropTypes库

>我们将以以下方式定义Proptypes：

通过解释方式：

touch ToggleSwitch.js ToggleSwitch.scss

> proptypes.string.isrequired：这是一个字符串值，它是必需的和强制性的。

> proptypes.string：这是一个字符串值，但不是强制性的。

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

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

export default App;

>

> proptypes.func：此道具将函数作为一个值，但不是强制性的。

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

> proptypes.bool：这是一个布尔值，但这不是强制性的。

>

> proptypes.array：这是一个数组值，但不是强制性的。

>
现在，我们可以使用toggleswitch组件进行。用以下内容替换src/toggleswitch/toggleswitch.js的内容：
• >
• >最后，要测试组件，请使用以下代码更新app.js：>

  create-react-app toggleswitch

  现在，当您前往> http：// localhost：3000/>时，您应该看到工作切换。

  

  工作切换按钮

  >步骤9 - 使组件键盘可访问

  >最后一步是使我们的组件键盘可访问。为此，首先更改下面的标签：

  >

  mkdir src/ToggleSwitch
  

  如您所见，我们添加了一个TabIndex属性，我们将其设置为1（聚焦）或-1（不集中），具体取决于该组件当前是否被禁用。

  >我们还声明了一个句柄Keypress功能来处理它接收键盘输入：>

  这检查键是否为空格栏。如果是这样，它可以防止浏览器的默认操作（在这种情况下滚动页面）并切换组件的状态。

  touch ToggleSwitch.js ToggleSwitch.scss

  >本质上是您所需要的。现在，组件可访问键盘。
  >但是，有一个小问题。如果您单击“ toggleswitch组件”，则将获得整个组件的轮廓，这可能是不足的。为了解决这个问题，我们可以稍微改变事物，以确保当它专注于键盘时会收到大纲，但在单击时不会：

  ：

  >在这里，我们在这两个内部元素中添加了Tabindex属性，以确保它们无法接收焦点。

  然后，将带有以下代码的toggleswitch.scs文件更新toggleswitch.scss文件，以在键盘上专注于键盘时将样式应用于toggleswitch的内部元素，而不是单击时。

  import React from 'react';
  import ToggleSwitch from './ToggleSwitch/ToggleSwitch'
  
  function App() {
    return (
      <ToggleSwitch />
    );
  }
  
  export default App;

  >。
  >您可以在此处阅读有关此技术的更多信息。它有点骇客，应该放弃

  >使用：focus-visible

  ，一旦获得足够宽的浏览器支持。>

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

  运行应用程序时，您应该能够使用太空栏切换组件。

  >键盘可访问的切换

  一个更完整的示例
  为了结束，我想演示一个更完整的示例，即在以下代码框中使用toggleswitch组件。

  >

  此演示使用同一页面上的多个toggleswitch组件。最后三个切换的状态取决于第一个切换的状态。也就是说，您需要接受营销电子邮件，然后才能完善您的选择。

  >

  摘要

  在本文中，我展示了如何使用React创建可重复使用的，iOS启发的React切换组件。我们研究了使用SCSS造型的组件，使其成为受控组件，通过传递IT道具对其进行自定义，并使其可访问键盘。

  >您可以在我们的>。 关于如何在React中创建一个可重复使用的组件

  的FAQS的FAQ 我如何自定义React Toggle Switch的外观？>

  >自定义React拨动开关的外观非常简单。您可以修改CSS属性以满足您的设计需求。例如，您可以更改开关的背景颜色，边框颜色，大小和形状。您还可以添加动画或过渡以获得更具交互性的用户体验。请记住，保持更改与您的整体应用程序设计一致，以获得无缝的用户体验。

  我可以使用功能组件的“开关”按钮REACT组件？

  是的，您可以使用功能组件的React Twoggle Switch。该过程类似于将其与类组件一起使用。您只需要在功能组件中导入并使用开关组件即可。您也可以使用usestate之类的挂钩来管理开关的状态。

  >

  >如何使我的开关按钮react组件可访问？

  >

  可访问性是Web开发的关键方面。为了使您的React Toggle开关可访问，您可以使用ARIA（可访问的富Internet应用程序）属性。例如，您可以使用“ ARIA检查”属性来指示交换机的状态。您还可以添加键盘支持，以允许用户使用键盘切换交换机。>

  如何测试我的React Switch组件？

  >

  测试是开发过程的重要组成部分。您可以使用JEST和React Testing库等测试库来测试您的React Switch组件。您可以编写测试以检查开关时单击并正确处理道具时是否正确切换和渲染。

  >

  >我可以使用Redux使用React Twoggle Switch？

  是的，您可以使用Redux使用React Twoggle Switch。您可以使用Redux操作和还原器来管理开关状态。如果需要在多个组件上共享开关状态，或者它影响应用程序的全局状态。

  >如何在我的React切换开关中添加标签？

  >将标签添加到您的React拨动开关可以提高其可用性。您可以通过将React Switch组件包装在“标签”元素中来添加标签。您也可以使用“ htmlfor”属性将标签与交换机相关联。

  >

  我如何处理React Toggle Switch组件中的错误？

  错误处理是任何组件的重要组成部分。在您的React Toggle开关组件中，您可以使用Try-Catch块来处理错误。您还可以使用错误边界，这是一种捕获和处理组件中错误的React功能。

  >我可以以形式使用React切换开关吗？

  是的，您可以使用表单中的React Twoggle开关。您可以在表单状态下处理开关状态。您还可以处理表单提交表单，并使用开关状态执行某些操作。>

  我如何使我的react切换开关动画？

  >

  动画您的React切换开关可以增强用户体验。您可以使用CSS过渡或动画来对开关进行动画动画，也可以使用React Spring（例如React Spring）进行更复杂的动画。

  >我可以将React Twoggle Switch与Typescript使用吗？

  是的，您可以将React Twoggle Switch与Typescript一起使用。您只需要定义道具的类型和交换机的状态即可。这可以帮助您在开发过程中捕获错误，并使您的代码更加稳健和可维护。

  >

  如何优化开关切换的性能？

  >

  >您可以使用React的备忘录功能来防止不必要的重新租户来优化React切换开关的性能。

  >如何以单一形式处理多个切换开关的状态管理？

  >您可以通过使用对象存储每个交换机的状态，以单个形式管理多个切换开关的状态。这使您可以轻松更新和访问每个交换机的状态，从而使表单更有效地处理。

以上是在React中创建一个切换开关作为可重复使用的组件的详细内容。更多信息请关注PHP中文网其他相关文章！