如何使用 react 和 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