{"id":428,"date":"2026-06-14T16:39:12","date_gmt":"2026-06-14T08:39:12","guid":{"rendered":"https:\/\/mitongxue.cn\/?p=428"},"modified":"2026-06-14T16:39:12","modified_gmt":"2026-06-14T08:39:12","slug":"react%e9%aa%8c%e8%af%81%e7%a0%81%e5%80%92%e8%ae%a1%e6%97%b6%e9%97%ae%e9%a2%98","status":"publish","type":"post","link":"https:\/\/mitongxue.cn\/index.php\/2026\/06\/14\/react%e9%aa%8c%e8%af%81%e7%a0%81%e5%80%92%e8%ae%a1%e6%97%b6%e9%97%ae%e9%a2%98\/","title":{"rendered":"React\u9a8c\u8bc1\u7801\u5012\u8ba1\u65f6\u95ee\u9898"},"content":{"rendered":"\n
let [leftTime, setLeftTime] = useState(60);\n    const [codeStatus, setCodeStatus] = useState(true);\n    \n    const runTime = () => { \n        const timer = setInterval(()=>{\n            setLeftTime(--leftTime);\n            if(leftTime <= 0){\n                clearInterval(timer);\n                setCodeStatus(true);\n                setDisabled(false);\n            }\n        },1000)\n}<\/code><\/pre>\n\n\n\n
\u76f4\u63a5\u5728\u5b9a\u65f6\u5668\u91cc --leftTime<\/code> \u539f\u5730\u4fee\u6539 state \u53d8\u91cf\uff0cstate \u662f const \u4e5f\u4e0d\u80fd\u76f4\u63a5\u6539\uff0c\u800c\u4e14\u95ed\u5305\u6355\u83b7\u4e86\u521d\u59cb\u503c\uff0c\u5012\u8ba1\u65f6\u4f1a\u9519\u4e71<\/strong>\uff1b\u540c\u65f6\u7528 let<\/code> \u53ea\u662f\u8868\u8c61\uff0c\u6839\u672c\u9519\u8bef\u662f\u540c\u6b65\u4fee\u6539 state \u503c\u3001\u95ed\u5305\u9677\u9631\u3002<\/p>\n\n\n\n
<\/p>\n\n\n\n
\u4f18\u5316\u540e<\/h2>\n\n\n\n
import React from 'react';\nimport IconMap from 'components\/IconMap.jsx';\nimport { LoginRule } from 'utils\/rules';\nimport { Space } from 'antd';\nconst { Compact } = Space;\nimport { useState } from 'react';\nconst SmCodeLogin = ({form, FormItem, Input, Button}) => {\n    const handleSendCode = () => {\n        console.log('\u53d1\u9001\u9a8c\u8bc1\u7801');\n        setCodeStatus(false);\n        setLeftTime(60);\n        setDisabled(true);\n        runTime();\n    }\n    const [disabled, setDisabled] = useState(true);\n    const [leftTime, setLeftTime] = useState(60);\n    const [codeStatus, setCodeStatus] = useState(true);\n    \n    const runTime = () => { \n        const timer = setInterval(()=>{\n            setLeftTime(prev=>{\n                if(prev <= 1){\n                    clearInterval(timer);\n                    setCodeStatus(true);\n                    setDisabled(false);\n                    return 0;\n                }   \n                return prev-1;\n            });\n            \n        },1000)\n    }\n\n    const checkMobile = async (e) => {\n        console.log(e.target.value,'e.target.value');\n        \/\/const status = await form.validateFields(['mobile']);\n        \/\/\u56e0\u4e3a\u8fd4\u56de\u7684promise2\u79cd\u72b6\u6001\u91c7\u7528trycatch\u5904\u7406\n        try{\n            const data = await form.validateFields(['mobile']);\n            console.log(data,'data');\n            setDisabled(false);\n        }catch(error){\n            console.log(error,'error');\n            setDisabled(true);\n        }\n    }\n    return (\n        <>\n            <FormItem\n                name=\"mobile\"\n                rules={LoginRule.mobileRule}\n                hasFeedback={true}\n            >\n                <Input  onChange={checkMobile} prefix={IconMap.mobile} placeholder=\"\u8bf7\u8f93\u5165\u624b\u673a\u53f7\" \/>\n            <\/FormItem>\n            <FormItem\n                name=\"code\"\n                rules={LoginRule.codeRule}\n                hasFeedback={true}\n            >\n                <Compact>\n                    <Input   \n                    prefix={IconMap.code} \n                    placeholder=\"\u8bf7\u8f93\u5165\u9a8c\u8bc1\u7801\"\n                    \/\/ addonAfter={<Button onClick={handleSendCode}>\u53d1\u9001\u9a8c\u8bc1\u7801<\/Button>} \n                    \/>\n                    <Button \n                        disabled={disabled} \n                        onClick={handleSendCode}\n                    >\n                        {codeStatus ? '\u53d1\u9001\u9a8c\u8bc1\u7801' : `${leftTime}\u79d2\u540e\u91cd\u65b0\u53d1\u9001`}\n                        \n                    <\/Button>\n                <\/Compact>\n            <\/FormItem>\n        <\/>\n    );\n}\n\nexport default SmCodeLogin;\n<\/code><\/pre>\n\n\n\n
\u518d\u6b21\u4f18\u5316\uff0c\u89e3\u51b3\u5b9a\u65f6\u5668\u672a\u9500\u6bc1\u95ee\u9898<\/h2>\n\n\n\n
import { useState, useRef, useEffect } from 'react';\nconst SmCodeLogin = ({form, FormItem, Input, Button}) => {\n    const handleSendCode = () => {\n        console.log('\u53d1\u9001\u9a8c\u8bc1\u7801');\n        setCodeStatus(false);\n        setLeftTime(60);\n        setDisabled(true);\n        runTime();\n    }\n    const [disabled, setDisabled] = useState(true);\n    const [leftTime, setLeftTime] = useState(60);\n    const [codeStatus, setCodeStatus] = useState(true);\n      const timerRef = useRef(null);\n    const runTime = () => { \n        \/\/ \u9632\u6b62\u91cd\u590d\u70b9\u51fb\u591a\u6b21\u5f00\u542f\u5b9a\u65f6\u5668\n        if (timerRef.current) return;\n        setCodeStatus(false);\n        timerRef.current = setInterval(()=>{\n            setLeftTime(prev=>{\n                if(prev <= 1){\n                    clearInterval(timerRef.current);\n                    timerRef.current = null;\n                    setCodeStatus(true);\n                    setDisabled(false);\n                    return 60;\n                }   \n                return prev-1;\n            });\n        },1000)\n    }\n\n    \/\/ \u7ec4\u4ef6\u5378\u8f7d\u5f3a\u5236\u6e05\u5b9a\u65f6\u5668\n    useEffect(() => {\n        return () => {\n            if (timerRef.current) clearInterval(timerRef.current);\n        };\n    }, []);\n<\/code><\/pre>\n\n\n\n
<\/p>\n","protected":false},"excerpt":{"rendered":"
\u76f4\u63a5\u5728\u5b9a\u65f6\u5668\u91cc –leftTime \u539f\u5730\u4fee\u6539 s..<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[12,11],"tags":[28],"class_list":["post-428","post","type-post","status-publish","format-standard","hentry","category-react-","category-front","tag-react"],"featured_image_urls":{"full":"","thumbnail":"","medium":"","medium_large":"","large":"","1536x1536":"","2048x2048":""},"author_info":{"info":["\u9648 \u67d0\u4eba"]},"category_info":"React<\/a> \u524d\u7aef<\/a>","tag_info":"\u524d\u7aef","comment_count":"0","_links":{"self":[{"href":"https:\/\/mitongxue.cn\/index.php\/wp-json\/wp\/v2\/posts\/428","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/mitongxue.cn\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/mitongxue.cn\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/mitongxue.cn\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/mitongxue.cn\/index.php\/wp-json\/wp\/v2\/comments?post=428"}],"version-history":[{"count":3,"href":"https:\/\/mitongxue.cn\/index.php\/wp-json\/wp\/v2\/posts\/428\/revisions"}],"predecessor-version":[{"id":431,"href":"https:\/\/mitongxue.cn\/index.php\/wp-json\/wp\/v2\/posts\/428\/revisions\/431"}],"wp:attachment":[{"href":"https:\/\/mitongxue.cn\/index.php\/wp-json\/wp\/v2\/media?parent=428"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/mitongxue.cn\/index.php\/wp-json\/wp\/v2\/categories?post=428"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/mitongxue.cn\/index.php\/wp-json\/wp\/v2\/tags?post=428"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}