Как я могу исправить кнопку для переключения между отключенным и включенным состояниями с помощью реакции и javascript?

Question

, если адрес электронной почты действителен, кнопка добавления активна. если электронная почта недействительна, кнопка добавления отключена.

ниже мой код,

function Parent() {
    const [email, setEmail] = useState('');
    const [isDisabled, setIsDisabled] = React.useState(true);
    const regex = /^(?:"[ .a-z0-9!#$%&'*+/=?^_{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_{|}~-]+)*"|[.a-z0-9!#$%&'*+/=?^_{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_{|}~-]+)*)@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)*[a-z0-9](?:[a-z0-9-]*[a-z0-9])?$/;

    const isValid = (value)=> {
        return regex.test(String(value).toLowerCase());
    }

    const onEmailChange = (event: any) => {
        setEmail(event.target.value);
    };

    useEffect(() => {
        setIsDisabled(!isEmail(email));
    }, [email]);

    return (
        <input
            type="text"
            onChange={onEmailChange}/>
        <button disabled={isDisabled}>add</button>
    );
}

регулярное выражение выше работает отлично. но проблема в том, что когда я набираю электронное письмо с надписью «user @», кнопка добавления отключается, когда пользователь вводит следующий символ, скажем, теперь электронное письмо «user@i», тогда кнопка добавления включена. теперь, когда пользователь вводит «user@i.», тогда кнопка добавления отключена и включена, когда введен этот «user@i.i» и т. д.

как я могу исправить это поведение ??? может кто-нибудь помочь мне с этим. спасибо.

Answer 1

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

const regex_email = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;

Демо: https://regexr.com/59qcb