猿问

我如何修复按钮以使用 React 和 JavaScript 在禁用和启用状态之间切换?

如果电子邮件有效,则启用添加按钮。如果电子邮件无效,则添加按钮将被禁用。


下面是我的代码,


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@ii”时禁用和启用添加按钮,依此类推。


我该如何解决这个问题???有人可以帮我解决这个问题吗?谢谢。


撒科打诨
浏览 80回答 1
1回答

慕妹3146593

你的问题是正则表达式,它不检查电子邮件的结尾,你需要用下面的更新你的正则表达式const&nbsp;regex_email&nbsp;=&nbsp;/^(([^<>()[\]\\.,;:\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
随时随地看视频慕课网APP

相关分类

JavaScript
我要回答