>在这里，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组件。我们需要以下道具：
>由于大多数道具必须由用户设置，而且我们不能使用任意值，因此，如果未传递所需的道具，最好停止渲染。如果可以使用简单的JavaScript完成此操作，如果语句还是三元运营商使用？ ：或一个短路&&：
随着应用程序的增长，我们可以通过类型检查捕获许多错误。 React具有一些内置的类型检查能力。要运行组件的道具检查类型，您可以分配特殊的PropTypes属性。我们可以使用React's Proptypecreate-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切换开关的性能。
>如何以单一形式处理多个切换开关的状态管理？
>您可以通过使用对象存储每个交换机的状态，以单个形式管理多个切换开关的状态。这使您可以轻松更新和访问每个交换机的状态，从而使表单更有效地处理。
