react 导航条选中颜色_[译]React+TypeScript开发Switch组件

开发一个React开关切换组件

这是一篇译文： 原文地址：Build a React Switch Toggle Component 本文源代码： https:// github.com/wangkaiwd/re act-hooks-TS-practice

学习如何使用原生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组件。