newsmy_recorder/src/components/DynamicCodeForm.js

import { Container, TextField, InputAdornment, Link, Button } from "@mui/material";
import React, { useState, useEffect, useRef } from 'react';
import PhoneIphoneIcon from '@mui/icons-material/PhoneIphone';
import LockIcon from '@mui/icons-material/Lock';
import { useSelector, useDispatch } from 'react-redux'
import yzs from "../business/request.js";
import Agreement from "./Agreement.js";
import { validatePhoneNumber, textHintOfValidatePhoneNumber } from "../business/utilities.js"

export default function ({ udid, firstEnter, onChange, agreeAgreement, onAgreeChange }) {
    const code = useRef(null);
    const [seconds, setSeconds] = useState(0);   // 倒计时
    const account = useSelector(state => state.user.account)
    const verificationCode = useSelector(state => state.user.verificationCode)

    useEffect(() => {
        const timer = window.setInterval(() => {
            if (seconds > 0) {
                setSeconds(seconds - 1);
            } else {
                code.current.disabled = false;
            }
        }, 1000);
        return () => {
            window.clearInterval(timer);
        };
    }, [seconds]);

    const onClick = (event) => {
        event.preventDefault();
        code.current.disabled = true;
        yzs.send_phone_code(udid, account)
        setSeconds(60);
    };

    return <Container disableGutters={true}
        sx={{
            width: 300,
            height: 200,
        }}
    >
        <TextField
            name="username"
            autoComplete="username"
            hiddenLabel
            placeholder="请输入手机号码"
            variant="outlined"
            value={account}
            color="primary"
            size="small"
            fullWidth
            error={firstEnter ? false : !validatePhoneNumber(account)}
            helperText={firstEnter ? "" : textHintOfValidatePhoneNumber(account)}
            onChange={onChange}
            InputProps={{
                startAdornment: (
                    <InputAdornment position="start">
                        <PhoneIphoneIcon />
                    </InputAdornment>
                ),
            }}
            sx={{
                minHeight: 64,
            }}
        />
        <TextField
            sx={{
                minHeight: 50,
            }}
            hiddenLabel
            fullWidth
            name="verification_code"
            placeholder="请输入验证码"
            type="text"
            autoComplete="current-password"
            variant="outlined"
            size="small"
            value={verificationCode}
            onChange={onChange}
            InputProps={{
                startAdornment: (
                    <InputAdornment position="start">
                        <LockIcon />
                    </InputAdornment>
                ),

                endAdornment: <InputAdornment position="end">
                    <Link ref={code}
                        color={seconds > 0 ? "#FFB3B3" : "red"}
                        component="button" underline="none" onClick={onClick}>{seconds > 0 ? `重新发送(${seconds})` : "发送动态码"}</Link>
                </InputAdornment>
            }}
        />
        <Button
            type="submit"
            variant="contained"
            color="primary"
            fullWidth
            disabled={!agreeAgreement}
            sx={{
                marginTop: 1.5,
                backgroundColor: "#FF595A",
                '&:hover': {
                    backgroundColor: '#FF595A',
                },
                '&:active': {
                    backgroundColor: '#FF595A',
                },
            }}
        >
            登录
        </Button>
        <Agreement agree={agreeAgreement} onChange={onAgreeChange} />
    </Container>
}