react hook+antd实现点击发送验证码功能

摘要:
value){callback()}elseif{callback()}elsecallback},},]}˃˂FormItemname='confrmPwd'rules={[{required:true,message:'请输入确认密码!

要实现的效果如图,点击发送验证码,文字变为60秒后重新发送,并且开始倒计时

react hook+antd实现点击发送验证码功能第1张react hook+antd实现点击发送验证码功能第2张

这是写成一个组件格式component -> eidtPass.tsx

import React, { useState } from 'react'import { Modal, Form, Input, notification } from 'antd'import { sendEmailCode } from '@/services/login'import { TableListItem } from '@/services/data.d'import { passwordValid, validEmail } from '@/utils/validate'
export interface FormValueType extends Partial<TableListItem>{
  time?: string;
  [propName: string]: any
}

const FormItem =Form.Item

interface CreateFormProps {
  modalVisible: boolean;
  onCancel: () => void;
  onConfirm: (values: FormValueType) => void;
  values: Partial<TableListItem>;
}
const formLayout ={
  //labelCol: { span: 7 },
  wrapperCol: { span: 24},
}

const CreateForm: React.FC<CreateFormProps> = (props) =>{
  const { modalVisible, onCancel, onConfirm } =props
  const [time, setTime] = useState(60)
  const [isShowCode, setIsShowCode] = useState<boolean>(false)
  const [form] =Form.useForm()

//发送邮箱验证码
  const sendEmail = async() =>{
    const fileds = await form.validateFields(['account', 'email'])
    //console.log(11, fileds)
    if(isShowCode) { // 倒计时未结束,不能重复点击
      return}
    setIsShowCode(true)
    //倒计时
   const active = setInterval(() => {
      setTime((preSecond) => {
        if (preSecond <= 1) {
          setIsShowCode(false)
          clearInterval(active)
          // 重置秒数
          return 60
        }
        return preSecond - 1
      })
    }, 1000)
const res
=await sendEmailCode({ ...fileds }) if (res.responseCode === '000000') { notification.success({ message: '发送成功,请填写收到的验证码', }) } } const renderContent = () =>{ return( <>{isForget && <> <FormItem name='account'rules={[{ required: true, message: '请输入用户名!'}]} > <Input placeholder='请输入用户名' maxLength={50} /> </FormItem> <FormItem name='email'rules={[ { required: true, message: '请输入用户邮箱!'}, { validator: (rule, value, callback) =>{ if (!value) { callback() } else if(validEmail(value)) { callback() } else callback('邮箱格式不正确') }, }, ]} > <Input placeholder='请输入用户邮箱' maxLength={50} /> </FormItem> <FormItem name='emailCode'rules={[ { required: true, message: '请输入邮箱验证码!'}, ]} > <Input placeholder='请输入邮箱验证码' maxLength={6} suffix={<a onClick={() => sendEmail()}> {isShowCode ? `${time}秒后重新发送` : '发送验证码'} </a>} /> </FormItem> </>} <FormItem name='newPwd'rules={[ { required: true, message: '请输入新密码!'}, { validator: (rule, value, callback) =>{ if (!value) { callback() } else if (form.getFieldValue('oldPwd') ===value) { callback('新旧密码不能一致') } else if(passwordValid(value)) { callback() } else callback('密码长度为8-20位,必须包含数字、大小写字母') }, }, ]} > <Input.Password placeholder='请输入新密码' maxLength={20} autoComplete='new-password' /> </FormItem> <FormItem name='confrmPwd'rules={[ { required: true, message: '请输入确认密码!'}, { validator: (rule, value, callback) =>{ if (!value) { callback() } else if (form.getFieldValue('newPwd') ===value) { callback() } else{ callback('确认密码与新密码不一致') } }, }, ]} > <Input.Password placeholder='请输入确认密码' maxLength={20} autoComplete='new-password' /> </FormItem> </> ) } const handleConfirm = async() =>{ const fieldsValue =await form.validateFields() onConfirm(fieldsValue) } const handleCancel = () =>{ form.resetFields() onCancel() } return( <Modal destroyOnClose title='忘记密码'visible={modalVisible} onCancel={() =>handleCancel()} onOk={() =>handleConfirm()} maskClosable={false} width={350} > <Form {...formLayout} form={form} initialValues={{}} >{renderContent()} </Form> </Modal> ) } export default CreateForm

免责声明:文章转载自《react hook+antd实现点击发送验证码功能》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇(转)blkid命令 获取文件系统类型、UUIDJDK11以上版本没有JRE的解决方法下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

react源码解析7.Fiber架构

react源码解析7.Fiber架构 视频课程(高效学习):进入课程 课程目录: 1.开篇介绍和面试题 2.react的设计理念 3.react源码架构 4.源码目录结构和调试 5.jsx&核心api 6.legacy和concurrent模式入口函数 7.Fiber架构 8.render阶段 9.diff算法 10.commit阶段 11.生命...

eldialog添加拖拽功能

import Vue from 'vue' Vue.directive('dialogDrag', { bind(el, binding, vnode, oldVnode) { const dialogHeaderEl = el.querySelector('.el-dialog__header') const dragDom = e...

QT QString类型转换为const char*(toLatin1)

Qstring str = "helloworld"; char *s; QByteArray ba = str.toLatin1(); s = ba.data(); toLatin1、toLocal8Bit都是QString转QByteArray的方法,Latin1代表ASCII,Local8Bit代表unicode。 const char* -- 指...

ReactNative: 使用日期选择器组件DatePickerIOS组件

一、简介 在App中,时间选择器使用的场景还是比较多的,例如选择外卖的送货时间、物流的收货日期等等。在ReactNative中提供了一个日期选择器组件DatePickerIOS,这个是iOS平台使用的。它的API也比较简单,一般实际开发中需要再次封装使用。 二、API 组件中常用属性如下 //当前日期实例,必选属性,一般可用当前日期表示:new Date(...

cloudevents 学习二 java 代码集成试用

主要是测试cloudevents 与java 的集成(client 使用nodejs) nodejs client const axios = require("axios").default; const { emitterFor, Mode, HTTP,CloudEvent } = require("cloudevents"); const type...

Android中Message机制的灵活应用

转自:http://qaohao.iteye.com/blog/509145 1.活用Android线程间通信的Message机制 1.1.Message 代码在frameworks\base\core\java\android\Os\Message.java中。 Message.obtain函数:有多个obtain函数,主要功能一样,只是参数不一样。...