控制台中的输入类型电子邮件抛出警应对

Question

当我尝试使用input[type="email"]在onChange事件上更改this.setState({email: e.target.value})状态时，我在控制台（Chrome浏览器）中收到了一堆警告：

DOMPropertyOperations.js:143 The specified value "s" is not a valid email address.
DOMPropertyOperations.js:143 The specified value "so" is not a valid email address.
DOMPropertyOperations.js:143 The specified value "som" is not a valid email address.
DOMPropertyOperations.js:143 The specified value "some" is not a valid email address.

当您更改state时会发生这种奇怪的行为，如果您传递数据props，则一切正常。

有什么想法吗？

P.S。我在表单中添加了noValidate。

Answer 1

有很好的文档说明您可以对电子邮件输入进行哪些验证，阅读本文并调整表单：

Data form validation - Web developer guides | MDN

通过正确的REGEX进行验证，并确定您是否需要实时验证（keyup，keypress）或者只是在您不再关注该输入时。希望它能帮助您更好地理解并帮助您解决问题。