React开发实践：如何做出好用的Switch组件

前言

HTML5 将 Web 开发者的战场从传统的 PC 端带到了移动端。然而移动端交互的核心在于手势和滑动，如果只是将 PC 端的点击体验简单地移植到移动端，势必让移动端体验变得了无生趣。以某 APP 收银台的支付密码输入框为例，里面的 Switch 组件只能通过点击改变状态，和原生控件的体验有着非常大的差距，不符合移动端的交互习惯。接下来，我们来尝试做出一个支持手指滑动操作的 Switch 组件，提升用户体验。

手势检测

手势交互的关键在于一套手势事件监测系统，用于检测move、tap、double tap、long tap、swipe、pinch、rotate等手势行为。安卓和 IOS 都提供一套完善的手势系统供原生 APP 调用，遗憾的是，HTML5 还没有相应的 API，需要 HTML5 工程师自己实现。出于简化，我们的 Switch 组件只支持 move 事件，因此，本章也只实现 move 事件的检测。其他事件的检测在《HTML5 手势检测原理和实现》一文中做了详细介绍。

我们对move事件的要求非常简单，就是每当手指在 DOM 内移动时，就把手指划过的相对距离告知监听器。

假设手指从 (X1,Y1) 点滑到 (X2,Y2) 点，那么手指在两点间滑动的X轴相对距离就是 X2 - X1 ，Y轴相对距离 Y2 - Y1。所以，只要我们能够获取手指的坐标位置，就能算出手指每次移动的相对距离，然后把ΔX和ΔY告知 move 事件的监听函数。

所以，move事件的监听器一般是这样(注意ES6语法)：

无论多么复杂的手势系统，他们都会基于四个最基础的触摸事件：

1. touchstart
2. touchmove
3. touchend
4. touchcancel

通过他们可以获取手指触摸点的坐标信息，进而算出手指移动的相对距离。

根据上面的图解，先来实现 touch 事件监听函数：

_onTouchStart 函数非常简单，就是记录下初始触摸点的坐标，保存在startX startY 变量中。

_onTouchMove 函数逻辑也比较清楚，通过 touch 的触摸点 point 和 startX, startY 得到手指的相对位移 deltaX, deltaY, 然后发出 onMove 事件，告知监听器有 move 事件发生，并携带 deltaX, deltaY 信息。最后，用现在的触摸点坐标去更新 startX, startY。

既然我们要用 React 实现组件，那就把 move 事件转化成 React 代码：

一定注意我们用了 React.Children.only 限制只有一个子级，思考一下为什么。完整的代码请参考这里，我们只给出大致结构：

Switch 组件实现

Switch 组件的 DOM 结构并不复杂，由最外的 wrapper 层包裹里层的 toggler。

有一点要注意，toggler 需要设置为 absolute 定位。因为这样，就可以将手指在 wrapper X轴上的相对滑动距离 deltaX 转化为 toggler 的 tranlate 的 x 值。

那 move 事件应该加在 wrapper 上面还是 toggler 上面呢？经验之谈，在固定不动的元素上检测手势事件，这会为你减少很多Bug。

我们在 wrapper 上监听手指的 move 事件，将 move 事件发出的 deltaX 做累加，就是 toggler 的 translate 的 x 值。即：

有了这个公式，就可以用 React 来实现了。首先修改render函数：

在 Gestures 中，用 this.onMove 去监听 move 事件。在 onMove 函数中，需要累加 deltaX 作为 toggler 的位移。

注意this.xBoundary，toggler 不能无限制的移动，必须限制在 wrapper 的范围内，这个范围的下限是0，上限是 wrapper 的宽度减去 toggler 的宽度。

好了，这样 Switch 组件的 V1 版本就完成了，点击这里在线查看你的大作吧（http://eeandrew.github.io/demos/switch/v1.html）。

然而还有两个明显的问题。

1. 现在只要手指进入 wrapper 的范围，就可以滑动 toggler 了。而我们的需求是只有当手指进入 toggler 才能滑动。
2. 当手指抬起时，toggler 就立即停止移动了。而我们的需求是当手指抬起时，toggler 需要自动滑到开始或者结束的位置。

也就是说，还需要监听手指在 toggler 上面的 touchstart 和 touchend 事件。当 touchstart 发生时，需要打开 toggler 移动的开关，当 touchend 发生时，需要根据情况让 toggler 滑到开始或结束的位置。

逻辑还是很清楚，下面来修改代码吧：

首先为 toggler 加上 touch 监听函数。

在 onToggerTouchStart 函数中，打开滑动开关(movingEnable) , 同时取消 toggler 位移动画。

在 onToggerTouchCancel 函数中，关闭滑动开关，同时为 toggler 添加一个位移动画。还根据 toggler 此时的位移量(translateX)，将 toggler 调整为回到初始位置(0) 或者回到最大位置(xBoundary)。

这样，我们的 Switch组件就大功告成了，在这里在线体验。