滑动校验码增加reset重置方法

src/components/captcha/SlideCapt.tsx

@@ -1,4 +1,4 @@
-import React, { memo, useCallback, useEffect, useState } from 'react'
+import React, { forwardRef, memo, useCallback, useEffect, useState, useImperativeHandle } from 'react'
 import { Popover, message } from 'antd'
 import GoCaptcha from 'go-captcha-react'
 import { SlideCaptchaCheckData } from './types.ts'
@@ -17,7 +17,18 @@ export interface SlideCaptProps {
   onChange?: (value?: string) => void
 }
 
-const SlideCapt = ({ config, api, value, onChange }: SlideCaptProps) => {
+export type SlideCaptRef = {
+  reset: () => void
+}
+
+
+const SlideCapt = forwardRef<SlideCaptRef | undefined, SlideCaptProps>((
+        {
+          config,
+          api,
+          value,
+          onChange,
+        }: SlideCaptProps, ref) => {
 
   const { styles } = useStyle()
   const [ open, setOpen ] = useState(false)
@@ -85,7 +96,20 @@ const SlideCapt = ({ config, api, value, onChange }: SlideCaptProps) => {
       }, 1000)
     })
 
-  }, [ api.checkCaptcha, setData, state, setState, setOpen, innerKey, fetchCaptcha ])
+  }, [ api.checkCaptcha, setData, state, setState, setOpen, innerKey, onChange, fetchCaptcha ])
+
+  useImperativeHandle(ref, () => {
+    return {
+      reset() {
+        setState(prevState => ({
+          ...prevState, type: 'default', title: '点击进行校验',
+        }))
+        setKey(undefined)
+        onChange?.(undefined)
+        refresh()
+      }
+    }
+  }, [ fetchCaptcha, setState, setKey ])
 
   useEffect(() => {
 
@@ -134,6 +158,6 @@ const SlideCapt = ({ config, api, value, onChange }: SlideCaptProps) => {
             </Popover>
           </div>
   )
-}
+})
 
 export default memo(SlideCapt)

src/pages/use/login/index.tsx

@@ -11,9 +11,9 @@ import {
   telegramLoginAtom,
   upLoginAtom,
 } from '@/store/system/user.ts'
-import React, { memo, useEffect, useLayoutEffect, useState } from 'react'
+import React, { memo, useEffect, useLayoutEffect, useRef, useState } from 'react'
 import systemServ from '@/service/system.ts'
-import SlideCapt from '@/components/captcha/SlideCapt.tsx'
+import SlideCapt, { SlideCaptRef } from '@/components/captcha/SlideCapt.tsx'
 
 const { Title, Text, Link } = Typography
 const { TabPane } = Tabs
@@ -28,6 +28,8 @@ const Login = memo(() => {
   const { mutate: emailLoginMutate } = useAtomValue(emailLoginAtom)
   const { mutate: telegramLoginMutate } = useAtomValue(telegramLoginAtom)
 
+  const slideCaptRef = useRef<SlideCaptRef>()
+
   const uphandleSubmit = (values: any) => {
     console.log(values)
     upLoginFun(values)
@@ -118,7 +120,13 @@ const Login = memo(() => {
                             height: '400px',
                           }}
                   >
-                    <Tabs defaultActiveKey="1" style={{ marginTop: '50px' }}>
+                    <Tabs defaultActiveKey="1"
+                          onChange={(key) => {
+                            if (key === '1') {
+                             slideCaptRef.current?.reset()
+                            }
+                          }}
+                          style={{ marginTop: '50px' }}>
                       <TabPane tab="邮箱密码登录" key="1">
                         <Form form={upform} onFinish={uphandleSubmit}>
                           <Form.Item name="username" rules={[ { required: true, message: '请输入邮箱' } ]}>
@@ -132,17 +140,15 @@ const Login = memo(() => {
                                     autoComplete="off"
                             />
                           </Form.Item>
-                          <Form.Item noStyle={true}
-                                     name={'captchaKey'}
+                          <Form.Item name={'captchaKey'}
                                      rules={[ { required: true, message: '点击进行校验' } ]}>
-                           <div style={{ marginBottom: 20 }}>
-                             <SlideCapt
-                                     api={{
-                               getCaptcha: systemServ.captcha,
-                               checkCaptcha: systemServ.captchaCheck
-                             }}/>
-                           </div>
 
+                              <SlideCapt
+                                      ref={slideCaptRef}
+                                      api={{
+                                        getCaptcha: systemServ.captcha,
+                                        checkCaptcha: systemServ.captchaCheck
+                                      }}/>
                           </Form.Item>
                           {/*<Form.Item name="code" rules={[{ required: true, message: "请输入验证码" }]}>*/}
                           {/*  <Input.Password size="large" placeholder="验证码" prefix={<LockOutlined />} />*/}