如何在反应中验证电子邮件地址表单输入答案

【问题标题】：How to validate email address form input in react如何在反应中验证电子邮件地址表单输入
【发布时间】：2022-09-25 19:23:31
【问题描述】：

email 类型的 HTML5 输入元素已经可以验证给定的输入是有效的电子邮件地址。如何在我的 react 应用程序中利用这一点，从而避免编写正则表达式或其他同样糟糕的解决方案？

我的反应是使用功能组件（不确定这个细节是否重要）

我尝试给我的输入元素一个输入，然后使用document.getElementById(\'foo\').validity.valid 但当然该元素在我的代码可以使用它的任何地方都不存在。

我的 onChange 处理程序是

onChange={event => setEmail(event.target.value)}

这只是设置输入元素中发生的任何无效数据。

请注意那些投票关闭为重复的人 - 我已经找到并阅读了所有所谓的重复。它们都是笼统地问的，即一般的 JavaScript，而不是专门用于反应，和/或它们要么被回答为“写一些毛茸茸的正则表达式”，要么“使用一些 3rd 方库”，两者这相当于“重新发明轮子，非常糟糕”。

【解决方案1】：

答案很简单，event.target 是对输入元素的引用；它有你的validity 属性。只需将event.target.validity.valid 与event.target.value 一起存储在您的组件状态中即可。

onChange={event => {
    setEmail(event.target.value)
    setValidEmail(event.target.validity.valid)
}}

【讨论】：