Блог

Я пытаюсь проверить ввод с помощью перехватов, но сталкиваюсь с проблемой, поскольку я хочу, чтобы, если пользователи оставляют электронное письмо пустым и переходят к паролю, тогда я хочу показать сообщение о том, что электронное письмо не может быть пустым, также хочу проверить с помощью регулярного выражения, что электронное письмо действительное или нет, если теперь отображается недопустимое электронное письмо, но я не могу увидеть сообщение об ошибке электронной почты в возврате. Буду признателен за любую помощь.

Я довольно новичок в перехватах react.

 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>
  

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

    const emailValidation = (e) => {
        const tempEmail = (e amp;amp; e.target amp;amp; 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>