React + TypeScript 开发Switch组件

开发一个React开关切换组件

这是一篇译文：

• 原文地址：Build a React Switch Toggle Component
• 本文源代码： github.com/wangkaiwd/r…

学习如何使用原生 HTML的复选框来开发一个 React开关组件，在这个过程你将会学到许多 React复选框相关的知识。

下面是IOS向世界推出的UI组件，人们把它称之为Switch或者Toggle。

咱们在开发什么

在IOS推出Switch以前，网页中的布尔输入只有复选框。复选框固然依旧能够在今天继续使用，可是switch根据现实生活中真实的开关改进了复选框。

switch给人真实的感受。相比于点击复选框，switch的点击效果就像你在真实的使用一个开关同样。

所以，在这篇教程中，咱们将会基于原生的HTML复选输入框来开发一个新的React Switch组件。此外，咱们也会添加一些CSS样式，来让简单、古老的复选框变成一个时髦漂亮的Switch。

编写Switch的HTML结构

每当我建立一个新的React组件的时候,我会先创建一个初步使人满意的HTML和CSS结构，而后再去编写JavaScript代码。

建立一个Switch.js的新文件，为它添加以下代码：

你这时候若是在编辑器中完成了这段代码，因为咱们使用了原生复选框来做为React Switch组件的基础，你将会看到一个简单的复选框。

提示：
这里咱们没有必要再从新发明一个轮子。毕竟，开关是展现布尔值的另外一种方式，而复选框本来就是用来处理布尔值的输入框。

用CSS来美化组件

在组件文件的同一目录下创建Switch.css文件,加入下面的CSS代码，大概看一下每一个类的用途。我不打算在这篇教程中去探索CSS,文章的重点是JavaScript和React。

使用Switch组件

要在React中使用Switch组件，咱们还须要最后一步：在其它组件中import Switch组件而且在组件中声明：

保存文件后，能够看到在浏览器中咱们已经将一个简单的复选框转换成了一个看上去至关漂亮的Switch输入框：

经过props来接收事件和属性

尽管咱们的Switch组件可能看起来很实用，但其实Switch组件并无正真的改变它的value值。

这是由于咱们的组件缺乏了俩个重要的属性：

• checked
• onChange

checked属性存储了input的当前value值。在咱们的组件中，他多是true或false。

每当咱们切换Switch组件时都会触发onChange事件，咱们将会经过onChange来改变Switch组件的value值。

在编写代码以前，咱们须要了解一下无状态组件和有状态组件。一个无状态组件也叫作哑吧组件,它不能控制它本身的状态，所以，须要另一个组件来记录当前组件的状态。

咱们的Switch组件将会是一个无状态组件，它须要父组件经过props来为它传递属性。

打开Switch.js而且进行以下修改：

代码相比于以前有2个新增内容：

• checked: 经过父组件传入的checked来控制是否选中
• onChange: 经过父组件传入的onChange来更改组件的checked属性

最后，打开父组件(我使用的是App.tsx)而且修改组件的使用方式：

注意，如今父组件的状态来自于useState hooks。这意味着这个组件将要向下把传递状态给咱们的Switch组件的checked属性。

咱们也在onChange函数中向下传递了设置函数setChecked。这样，在Switch组件进行切换改变value值的时候，他将会调用父组件传下来的onChange函数

切换时改变背景色

若是你完成了上边的代码，会发现Switch组件在切换状态的时候视觉UI上并无什么不一样。

因为咱们可以使用Switch组件中经过父组件props传递下来的checked属性，因此咱们只须要对代码作一个很简单的改动就能够改变Switch组件的背景色。

修改Switch.tsx组件中的label元素，代码以下：

保存组件，切换到你的浏览器页面你会看到一个完整工做的Switch组件。当Switch组件激活的时候会变成绿色，而当它关闭的时候会变为灰色。

到这里，咱们已经拥有了一个完整功能的React Switch组件，它能够切换、更改value值而且会在激活的时候变为绿色。

若是你想要知道如何可以指定激活颜色来扩展咱们的Switch组件，那么请继续往下阅读。

指定切换颜色

开发一个灵活的React组件而且可以让它应用于多种不一样的场景是一个特别好的编程实践。例如，咱们可能将会在下面的状况使用Switch组件：

• 在登陆表单中，告诉网站要记住你的用户认证信息
• 在一个设置页面
• 在模态框中用来删除用户帐户

这些只是3个简单的例子，网页中还有数不尽的Switch组件的应用场景。

如今有一个问题，咱们的Switch组件在激活的时候只能显示绿色。假设咱们在模态框中删除用户帐户时想要让激活颜色变成红色来更好的提醒用用户该怎么办呢？

让咱们为Switch组件添加另一个属性checkedColor来进行控制激活额颜色：

checkedColor是一个16进制的字符串。保存代码后，跳转到父组件并为声明的Switch组件添加一个新的checkedColor属性：

如今咱们已经获得了一个灵活的、模块化的Switch组件。