动机
本来想着 React 生态这么好应该能找到一个很好用的 OTP (One-time password) 组件的，结果一通折腾，没发现一个好用的，很多库甚至提供的在线示例就有些奇奇怪怪的小缺陷……以下是我找到并简单测试过的库（甚至还看了个 Vue 的 😂）：
至于没有提供在线示例的，根本没有想测试的欲望。事已至此，那就自己上吧，本来打算也是直接写个类似的 React 组件出来的，结果写着写着发现还是封装成 React Hook 更灵活，接下来就介绍下专门为此开发的库 🚀 use-otp-input。
设计
因为找到的库都是会出现选择字符的情况，这在我看来是不理解的，这不符合一般用户直觉，因此需要手动控制光标的位置，说来也巧，之前刚好封装过一个 selection-extra 的库，用户操作和管理 Selection。现在是直接安装它来使用的，不过追求极致倒是可以只复制出核心逻辑即可，为了将来可能的扩展性还是直接装库了。
刚开始全凭个人感觉在移动光标，搞完测试效果怎么都不太合适，最后发现直接参考普通的输入框组件的行为才是最符合直觉的，因此做了比较大的重构。
支持的功能有：
- 🦄 更符合普通输入组件直觉的输入逻辑，包括粘贴文本字符串
- ✨ 支持
Backspace和Delete按键，包括 Ctrl 快捷键 - 🎈 支持左右方向键移动光标位置
值得注意的是因为行为类似单个输入框，因此用户无法将光标移动到空白的输入框中，除非不存在前一个单元格或者前一个单元格存在有效输入。
开发
思路有了其实开发是相对简单的，只是会有很多边界情况需要处理，如果查看源码会看到多处因为光标出现的位置不符合预期而做的特殊处理。如果有需要可以自行参考源码查看更多细节。
另外，因为这个库只做了 OTP 组件的状态管理，因此 UI 需要自行实现，本来 Demo 的 UI 都很原始，想着这个库应该多少有点用，还得写个文章引下流呢，所以又花了不少时间把 Demo 写得漂亮些，才有了这样的效果：
总的来看，使用效果应该是超越了已发现的同类库的，甚至可以说是效果拔群 😂
总结
越是基础的功能越是需要注重各种细节，因为这个功能需要自行控制光标位置，基本每一个小细节都需要考虑到，不然都可能出现奇奇怪怪的缺陷。所幸经过不断尝试与妥协，最后还是得到了一个自己比较满意的效果。欢迎感兴趣的朋友们尝试与反馈 👀
原文链接：https://juejin.cn/post/7315656189449666596 作者：云深ii
