react?hooks?計(jì)數(shù)器實(shí)現(xiàn)代碼
今天給大家分享react hooks 計(jì)數(shù)器實(shí)現(xiàn)代碼,代碼如下所示:
180秒倒計(jì)時(shí)
const [count, setCount] = useState(0) setCount(180) useEffect(() => { clearTimeout(timer) timer = setTimeout(() => { if (count > 1) { setCount(count - 1) } else { setIsSendEmail(false) } }, 1000) // eslint-disable-next-line }, [count])
import { useState, useRef, useEffect } from 'react' import Api from '../../../api' import Toast from 'react-native-root-toast' import { checkEmail } from '../../../utils/tools' import AsyncStorage from '@react-native-async-storage/async-storage' let timer export default function useList(props) { const [username, setUsername] = useState( '' ) const [emailCode, setEmailCode] = useState( '' ) const [isSendEmail, setIsSendEmail] = useState(false) const [count, setCount] = useState(0) const [emailId, setEmailId] = useState('') const [avatar, setAvatar] = useState(null) const [nickname, setNickname] = useState( '' ) const [password, setPassword] = useState( '' ) const [code, setCode] = useState( '' ) const [visible, setVisible] = useState(false) // eslint-disable-next-line const [isLoading, setIsLoading] = useState(false) const [captchaId, setCaptchaId] = useState('') const [captcha, setCaptcha] = useState('') const [visible1, setVisible1] = useState(false) const usernameEl = useRef(null) const { navigation } = props const toggleDialog1 = () => { setVisible1(!visible1) } const handleInput = (e) => { setUsername(e) } const handleSendEmail = () => { const { isEmail, message } = checkEmail(username) if (username.trim() === '') { Toast.show('郵箱不能為空', { duration: 3000, position: Toast.positions.CENTER, }) return } else if (isEmail === false) { Toast.show(message, { duration: 3000, position: Toast.positions.CENTER, }) return } Api.h5.userSendEmailCode({ username }).then((res) => { if (res.code === 200) { setEmailId(res.data.emailId) Toast.show(res.message, { duration: 3000, position: Toast.positions.CENTER, }) setCount(180) setIsSendEmail(true) } }) } const handleRegister = () => { const { isEmail, message } = checkEmail(username) if (username.trim() === '') { Toast.show('郵箱不能為空', { duration: 3000, position: Toast.positions.CENTER, }) return } else if (isEmail === false) { Toast.show(message, { duration: 3000, position: Toast.positions.CENTER, }) return } else if (password.trim() === '') { Toast.show('密碼不能為空', { duration: 3000, position: Toast.positions.CENTER, }) return } else if (code.trim() === '') { Toast.show('驗(yàn)證碼不能為空', { duration: 3000, position: Toast.positions.CENTER, }) return } else if (!emailId) { Toast.show('請獲取郵箱驗(yàn)證碼', { duration: 3000, position: Toast.positions.CENTER, }) return } Api.h5 .userAiAdd({ username, emailCode, emailId, avatar, nickname, password, code, captchaId, }) .then((res) => { if (res.code === 200) { navigation.navigate('Login') } }) } const handleGuest = () => { Api.h5.userAiGuestAdd({}, false).then((res) => { if (res.code === 200) { const { username, password } = res.data Api.h5 .userAiLogin({ username, password, isGuest: true }, false) .then(async (res) => { if (res.code === 200) { const { username, nickname, token, talkId, uid } = res.data AsyncStorage.setItem('username', username) await AsyncStorage.setItem('nickname', nickname) AsyncStorage.setItem('token', token) AsyncStorage.setItem('talkId', talkId) AsyncStorage.setItem('uid', uid) navigation.navigate('Index', { type: 'home', }) } }) } }) } const handleNav = (path) => { navigation.navigate(path) } const handleVisilbe = () => { setVisible(!visible) } const getCaptcha = async () => { Api.h5.userCaptcha({}).then((res) => { if (res.code === 200) { const { captchaId, captcha } = res.data let svg = captcha let height = svg.indexOf('height') let width = svg.indexOf('width') let step1 = svg.slice(0, height + 8) let step2 = svg.slice(height + 8 + 2) svg = `${step1}150${step2}` let step3 = svg.slice(0, width + 5) let step4 = svg.slice(width + 8 + 3) svg = `${step3}450${step4}` let html = `<div style="text-align:center;width:100%;overflow:hidden;">${svg}</div>` setCaptcha(html) setCaptchaId(captchaId) } }) } const handleUploadFileCallback = (key) => { setAvatar(key) } useEffect(() => { getCaptcha() }, []) useEffect(() => { clearTimeout(timer) timer = setTimeout(() => { if (count > 1) { setCount(count - 1) } else { setIsSendEmail(false) } }, 1000) // eslint-disable-next-line }, [count]) useEffect(() => { Api.h5.uploadGetTokenForH5().then(async (res) => { if (res.code === 200) { await AsyncStorage.setItem('qiniuUploadTokenForH5', res.data.token) } }) }, []) return { username, emailCode, isSendEmail, count, avatar, nickname, password, code, visible, isLoading, captcha, visible1, usernameEl, setEmailCode, handleSendEmail, setNickname, setPassword, setCode, toggleDialog1, handleInput, handleRegister, handleGuest, handleNav, handleVisilbe, getCaptcha, handleUploadFileCallback, } }
到此這篇關(guān)于react hooks 計(jì)數(shù)器實(shí)現(xiàn)代碼的文章就介紹到這了,更多相關(guān)react hooks 計(jì)數(shù)器內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
React教程之Props驗(yàn)證的具體用法(Props Validation)
這篇文章主要介紹了React教程之Props驗(yàn)證的具體用法(Props Validation),非常具有實(shí)用價(jià)值,需要的朋友可以參考下2017-09-09React Native中WebView與html雙向通信遇到的坑
這篇文章主要介紹了React Native中WebView與html雙向通信的一些問題,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)吧2023-01-01react-native 封裝選擇彈出框示例(試用ios&android)
本篇文章主要介紹了react-native 封裝選擇彈出框示例(試用ios&android),具有一定的參考價(jià)值,有興趣的可以了解一下2017-07-07react render的原理及觸發(fā)時(shí)機(jī)說明
這篇文章主要介紹了react render的原理及觸發(fā)時(shí)機(jī)說明,具有很好的參考價(jià)值,希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-02-02react16.8.0以上MobX在hook中的使用方法詳解
這篇文章主要為大家介紹了react16.8.0以上MobX在hook中的使用方法詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-07-07React Native 中實(shí)現(xiàn)確認(rèn)碼組件示例詳解
這篇文章主要為大家介紹了React Native中實(shí)現(xiàn)確認(rèn)碼組件示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-08-08