react hook+antd實現點擊發送驗證碼功能

要實現的效果如圖,點擊發送驗證碼,文字變為60秒后重新發送,並且開始倒計時

      

 

這是寫成一個組件格式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