前言
在前端开发中，我们经常会遇到需要我们进行选择操作的情形，比如选择一段文本或者选择一个区域，而在实现这些功能时，因为浏览器的差异，我们需要使用一些工具来帮助我们快速实现这些功能。@wootencl/react-selectable-fast 是一个非常好用的选择包，它可以帮助我们轻松实现各种选择操作，请接下来跟我一起了解该包的使用教程。
安装
使用 npm 或 yarn 进行安装，命令如下：
npm install @wootencl/react-selectable-fast --save
用法
这里以选择区域为例，我们可以先创建一个 Selectable 组件，然后在该组件内部进行需要的操作。
创建 Selectable 组件
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ ---------- ---- ----------------------------------
----- ----------- ------- --------- -
-------- -
------ -
----------- -------------------- -- --------------------
--------- -------
--------- -------
--------- -------
-------------
--
-
-
------ ------- ------------这里我们创建了一个 SimpleSelectable 组件，并向该组件内添加了三个 div，这些 div 就是我们需要进行选择操作的区域。
在 Selectable 组件内部，我们通过设置 onSelection 回调函数来获取选中区域的信息。可以看到，onSelection 函数接收一个参数，即依次选中的 div 组件数组。
通过以上代码，我们就已经实现了选择区域的功能，非常简单。
设置选取区域样式
我们可以通过使用 Selectable 的 style 属性来设置选取区域的样式，例如：
<Selectable
onSelection={(items) => console.log(items)}
style={{ backgroundColor: 'rgba(0,0,0,0.1)', zIndex: 2 }}
>
<div>item 1</div>
<div>item 2</div>
<div>item 3</div>
</Selectable>该代码将在选取时，给选取区域添加上一个半透明背景色，使其更加的显眼。
高级用法
- 在刚刚介绍的示例中，我们对可选区域进行了硬编码，如果在实际使用中，我们可能需要根据业务逻辑来动态的生成可选区域，这时候我们可以使用
SelectableGroup组件。
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ ----------- - --------------- - ---- ----------------------------------
----- ----------- ------- --------- -
-------- -
-----------------
----------------- -- -
----------- ------------- -------------------- -- --------------------
-------------------------
-------------
---
------------------
-
-
在上述代码中，我们可以动态的生成可选区域，同时使用 SelectableGroup 来管理这些区域。
如果我们需要在可选区域外，再添加其他组件时，我们有以下两种方式可以达到目的：
将要加入的组件也放到
SelectableGroup内部，让它也成为可选区域，然后在 onSelection 回调中判断选中的组件类型，如果是加入的非可选组件，则进行后续处理；否则，不做处理。在
Selectable组件内部通过getBoundingRect()获取当前组件在父容器中的位置信息，然后根据这些信息计算出其他组件是否与当前组件发生碰撞，如果发生碰撞，则进行操作；如果没有碰撞，则不做处理。
我们还可以通过修改
Selectable组件的默认配置，来实现其他的需求，例如：禁止多选功能；修改选择框的起始点等等，代码如下：
-- -------------------- ---- ------- ----------------------- - - ---------- -- ------------ -- --------------- --- --------------- ----- ---------------------- ----- ----------------------- ----- ---------------- ------ --------- ------ --------------- --- ----------- --------------------------- ------- ------ --------------------- ------ -------------------- --- ------------------ -- -- ----- ----------------- ----- ------------ -- -- --- --------------- -- -- --- ----------------- -- -- -- --
结论
在本文中，我们了解了 @wootencl/react-selectable-fast 的基本用法，通过使用该 npm 包，我们可以轻松的应对各种选择操作，同时，还深入的介绍了该包的高级应用，相信这些内容将会对你的工作会有所帮助，如果你有使用该包的经验或者有其他好的解决方案，欢迎在评论区留言，谢谢。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066b5551ab1864dac66b34