我如何通过钩子使用正则表达式验证输入字段的反应

Question

我正在尝试使用钩子验证输入，但我遇到了一个问题，如果用户将电子邮件留空并转到密码，那么我想显示一条消息，即电子邮件不能为空，还想使用正则表达式进行检查如果现在显示电子邮件无效，则该电子邮件是否有效，但我无法在退货中看到电子邮件错误消息。 任何帮助将不胜感激。

我对反应钩子很陌生。

export default function SignInForm() {
    const [email, setEmail] = useState(null);
    const [password, setlPassword] = useState(null);
    const [emailError, setEmailError] = useState(null);

    const emailValidation = (e) => {
         setEmail(e.target.value)
        if(!email){
            setEmailError('Enter a Email Address')
        }
    }
    console.log(emailError,"emailerror")
    const { t } = useTranslation();
    return (
        <Form fontColor={(props) => props.theme.colors.grey.base}>
            <label>{t('E-mail')}</label>
            <Input
                id={'email'}
                type={'email'}
                onChange={emailValidation}
            />
            <Status>{emailError}</Status>
            <label>{t('Password')}</label>
            <Input
                id={'password'}
                type={'password'}
                onChange={(e) => setlPassword(e.target.value)}
            />
            <Column>
                <ForgetText>{t('Forgotten')}</ForgetText>
            </Column>
            <Button themeBlue width={'336px'} onClick={() => onSubmit()}>
                {t('Sign In')}
            </Button>
</Forms>

Answer 1

export default function SignInForm() {
    const [email, setEmail] = useState('');
    const [password, setlPassword] = useState('');
    const [emailError, setEmailError] = useState('');

    const emailValidation = (e) => {
        const tempEmail = (e && e.target && e.target.value) || e;
        setEmail(tempEmail);
        const re = /\S+@\S+\.\S+/;
        const isValidEmail = re.test(String(tempEmail).toLowerCase());
        if(!tempEmail){
            setEmailError('Enter a Email Address')
        } else if(!isValidEmail) {
            setEmailError('Enter a Valid Email')
        }
    }
    console.log(emailError,"emailerror")
    const { t } = useTranslation();
    return (
        <Form fontColor={(props) => props.theme.colors.grey.base}>
            <label>{t('E-mail')}</label>
            <Input
                id={'email'}
                type={'email'}
                onChange={emailValidation}
            />
            <Status>{emailError}</Status>
            <label>{t('Password')}</label>
            <Input
                id={'password'}
                type={'password'}
                onChange={(e) => {setlPassword(e.target.value); emailValidation(email);}}
            />
            <Column>
                <ForgetText>{t('Forgotten')}</ForgetText>
            </Column>
            <Button themeBlue width={'336px'} onClick={() => onSubmit()}>
                {t('Sign In')}
            </Button>
</Forms>