在控制台中输入类型的电子邮件抛出警告。反应答案

【问题标题】：input type email throw warning in console. React在控制台中输入类型的电子邮件抛出警告。反应
【发布时间】：2017-01-19 18:15:08
【问题描述】：

当我尝试使用this.setState({email: e.target.value}) 在onChange 事件上更改input[type="email"] 的状态时，我在控制台（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 时会发生这种奇怪的行为，如果您传递数据 throw props 一切正常。

有什么想法吗？

附：我在表单中添加了noValidate。

【问题讨论】：

你可以尝试使用this.isMounted() 像if (this.isMounted()) {this.setState({email: e.target.value})}
我会尝试，但不明白它是如何相关的，我确定该组件已安装
我试过你提供的东西，在最新的反应版本中 isMounted 方法已被弃用，而是我们应该使用 componentWillMount，但在我的情况下它没有意义
它目前是一个 Chrome / React 错误 - 您可以在官方存储库的这个问题中阅读更多相关信息 - github.com/facebook/react/issues/7487

标签： javascript email reactjs

【解决方案1】：

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

Data form validation - Web developer guides | MDN

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

【讨论】：

这个问题不是关于验证的，它只是对 React 中受控输入的处理，这给我带来了奇怪的警告