📅 今天很晚才来写，我们继续 50 个小项目挑战！——VerifyAccountUi组件

仓库地址：https://gitee.com/hhm-hhm/50days50projects.git

​​​​

创建一个简洁而优雅的验证码输入界面。通过这个示例，你将学会如何构建一个响应式且用户友好的验证码输入组件，并掌握一些实用的 Vue 技巧和 Tailwind CSS 样式技巧。

准备好了吗？让我们开始吧！🚀

🌀 组件目标

• 动态生成6个独立的验证码输入框
• 实现自动聚焦与跳转到下一个/上一个输入框的功能
• 添加适当的视觉反馈以提升用户体验
• 采用 Tailwind CSS 快速构建美观的响应式布局

🔧 VerifyAccountUi.tsx组件实现

import React, { useState, useEffect, useRef } from 'react' const VerifyAccountUi: React.FC = () => { // 初始化 6 位验证码数组 const [codes, setCodes] = useState<string[]>(new Array(6).fill('')) // 创建 refs 数组，用于管理每个 input 元素 const codeInputs = useRef<(HTMLInputElement | null)[]>([]) // 组件挂载后聚焦第一个输入框 useEffect(() => { if (codeInputs.current[0]) { codeInputs.current[0].focus() } }, []) // 处理键盘事件 const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>, index: number) => { const key = e.key // 只允许数字、Backspace 和 Tab（Tab 用于正常跳转） if (!/^\d$/.test(key) && key !== 'Backspace' && key !== 'Tab') { e.preventDefault() return } // 数字输入 if (/^\d$/.test(key)) { const newCodes = [...codes] newCodes[index] = key setCodes(newCodes) // 自动聚焦下一个输入框 if (index < 5 && codeInputs.current[index + 1]) { setTimeout(() => codeInputs.current[index + 1]?.focus(), 10) } } // 退格键处理 if (key === 'Backspace') { const newCodes = [...codes] newCodes[index] = '' setCodes(newCodes) // 聚焦上一个输入框（如果当前为空或刚被清空） if (index > 0 && codeInputs.current[index - 1]) { setTimeout(() => codeInputs.current[index - 1]?.focus(), 10) } e.preventDefault() // 阻止默认删除行为（避免重复触发） } } // 同步更新输入框值（受控组件） const handleChange = (e: React.ChangeEvent<HTMLInputElement>, index: number) => { const value = e.target.value // 只保留最后一位数字（防止粘贴多字符） if (/^\d?$/.test(value)) { const newCodes = [...codes] newCodes[index] = value.slice(-1) setCodes(newCodes) } } return ( <div className="flex min-h-screen items-center justify-center overflow-hidden bg-gray-900 font-sans"> <div className="max-w-2xl rounded-lg border-4 border-black bg-white p-8 text-center"> <h2 className="mb-2 text-2xl font-bold">Verify Your Account</h2> <p className="mb-8 text-gray-600"> We emailed you the six digit code to cool_guy@email.com <br /> Enter the code below to confirm your email address. </p> {/* 验证码输入框容器 */} <div className="mb-8 flex flex-wrap items-center justify-center"> {codes.map((_, index) => ( <input key={index} ref={(el) => { codeInputs.current[index] = el }} value={codes[index]} onChange={(e) => handleChange(e, index)} onKeyDown={(e) => handleKeyDown(e, index)} className="mx-1 my-2 h-20 w-20 rounded-md border border-gray-200 text-center text-5xl font-light [caret-color:transparent] transition-all duration-300 focus:border-blue-500 focus:shadow-lg focus:shadow-blue-200/50 focus:outline-none" type="text" maxLength={1} inputMode="numeric" pattern="[0-9]" aria-label={`Digit ${index + 1}`} /> ))} </div> <small className="inline-block max-w-md rounded-md bg-gray-100 px-4 py-2 text-sm text-gray-600"> This is design only. We didn't actually send you an email as we don't have your email, right? </small> </div> <div className="fixed right-20 bottom-5 z-100 text-2xl text-red-500"> CSDN@Hao_Harrision </div> </div> ) } export default VerifyAccountUi

🔄 关键差异总结

🔁 转换说明

1.状态管理：ref([])→useState<string[]>([])

✅ 使用 TypeScript 泛型确保类型安全。

2.DOM 引用：ref([])→useRef<(HTMLInputElement | null)[]>

Vue 中：

const codeInputs = ref([]) // v-for 中绑定 ref="codeInputs"

React 中需手动管理 ref 数组：

const codeInputs = useRef<(HTMLInputElement | null)[]>([]) // 在 render 中： <input ref={(el) => { codeInputs.current[index] = el }} />

✅ 这是 React 中批量管理多个 DOM 引用的标准做法。

3.生命周期：onMounted→useEffect(..., [])

useEffect(() => { codeInputs.current[0]?.focus(); }, []);

✅ 确保只在挂载时聚焦第一个输入框。

4.事件处理：@keydown→onKeyDown+onChange

为什么需要onChange？

• Vue 的v-model自动处理输入；
• React 是受控组件，必须通过value + onChange同步状态；
• 仅靠onKeyDown无法处理粘贴、拖拽、中文输入法等场景。

因此新增handleChange：

const handleChange = (e, index) => { const value = e.target.value; if (/^\d?$/.test(value)) { // 只接受 0 或 1 位数字 setCodes([...codes.slice(0, index), value.slice(-1), ...codes.slice(index + 1)]); } };

✅ 提升健壮性，防止用户粘贴 "123" 到单个输入框。

5.键盘事件逻辑迁移

• 保留数字输入自动跳转；
• 保留 Backspace 回退；
• 阻止非数字输入（如字母、符号）；
• 使用setTimeout(..., 10)确保 DOM 更新后再聚焦（与 Vue 行为一致）。

6.无障碍与语义化

添加aria-label提升可访问性：

aria-label={`Digit ${index + 1}`}

7.样式完全复用

• 所有 Tailwind 类名直接迁移；
• [caret-color:transparent]隐藏光标（设计需求）；
• inputMode="numeric"触发移动端数字键盘。

✅ 注意事项

1. 不要省略onChange：否则粘贴内容会失效；
2. 使用回调 ref：避免useRef数组在 re-render 时丢失引用；
3. 正则校验：/^\d$/比e.key >= 0更可靠（避免特殊键干扰）；
4. 防抖聚焦：setTimeout确保 React 完成状态更新后再操作 DOM。

💡 可选优化

• 将完整验证码拼接为字符串：const fullCode = codes.join('')；
• 添加“重新发送”按钮；
• 支持鼠标点击聚焦任意输入框。

🎨 TailwindCSS 样式重点讲解

🦌 路由组件 + 常量定义

router/index.tsx中children数组中添加子路由

{ path: '/', element: <App />, children: [ ... { path: '/VerifyAccountUi', lazy: () => import('@/projects/VerifyAccountUi').then((mod) => ({ Component: mod.default, })), }, ], },

constants/index.tsx 添加组件预览常量

import demo41Img from '@/assets/pic-demo/demo-41.png' 省略部分.... export const projectList: ProjectItem[] = [ 省略部分.... { id: 41, title: 'Verify Account Ui', image: demo41Img, link: 'VerifyAccountUi', }, ]

🚀 小结

通过这篇文章，我们使用 React19 和 TailwindCSS 创建一个直观且易于使用的验证码输入界面。通过合理利用 react的useState和 Tailwind CSS 的强大样式能力，我们可以轻松地构建出既美观又功能强大的前端组件。

想要让你的验证码输入界面更加完善？考虑以下扩展功能：

✅ 表单提交验证：增加对用户输入验证码的验证逻辑。
✅ 错误提示：当验证码无效时显示相应的错误消息。
✅ 倒计时重发机制：模拟验证码过期后重新发送验证码的功能。

📅 明日预告： 我们将完成RangeSlider组件，一个可以自定义进度的范围滑块组件。🚀

感谢阅读，欢迎点赞、收藏和分享 😊

原文链接：https://blog.csdn.net/qq_44808710/article/details/149778543https://blog.csdn.net/qq_44808710/article/details/149779252https://blog.csdn.net/qq_44808710/article/details/149778543

每天造一个轮子，码力暴涨不是梦！🚀