React+Antd 无插件实现多个输入框验证码功能 + 倒计时(附完整代码)

最新推荐文章于 2024-08-22 08:16:59 发布

cvory

最新推荐文章于 2024-08-22 08:16:59 发布

阅读量2.2k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： Tool web前端 react

本文链接：https://blog.youkuaiyun.com/qq_40593656/article/details/118334046

本文详细介绍了如何在React应用中，结合Ant Design库，不依赖额外插件实现一个复杂的验证码功能。该功能包括多个输入框用于输入验证码以及倒计时功能。通过在div内放置span元素并使用透明input定位，每个span获取并显示对应值。文章提供关键代码示例以及完整代码以供参考。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

需求

如下图，实现多个框的验证码，并且在输入后自动调用接口
在这里插入图片描述

思路

在一个div中放置对应个数的span
使用一个input，然后让它透明，定位在div之上
span截取对应的值进行显示

Code

主要代码：
在这里插入图片描述

完整代码


import React, {
   
    useState, useEffect } from 'react';
import {
   
    InputNumber } from 'antd';

import {
   
    navigate } from '@/utils/common';//公用跳转
import styles from './index.less';
let secondInterval = null; //秒数定时器

const Verify = () => {
   
   
  const [phoneNum, setPhoneNum] = useState(null); // 验证码数字类型
  const [numString, setNumString] = useState(''); // 验证码的字符串类型
  const [seconds, setSeconds] = useState(60); //倒计时秒数

  useEffect(() => {
   
   
    return () => {