React.js 和 HTML5 电子邮件验证

Question

我的反应组件中有一个电子邮件输入：

                <input
                  type="email"
                  autoComplete="email"
                  placeholder="Email"
                  required
                  value={this.state.formData.email}
                  onChange={this.handleFieldChange('email')}
                />

在控制台中给我一个警告：

 The specified value "myemail" is not a valid email address.

每次击键，直到输入有效的电子邮件。 我相信这是默认的 HTML5 电子邮件验证消息，并且由于我每次击键都会更改其状态，因此 react 会重新呈现它，而 HTML5 会重新验证它。将类型更改为“文本”可以修复它，但我希望将其保留为“电子邮件”。为了避免那些 html5 警告，在反应中处理这个问题的正确方法是什么？

Answer 1

对于受控输入，最终 React 必须调用 Element.prototype.setAttribute()，并且至少在 Chrome 52 中（我尚未使用其他浏览器进行测试）这会导致控制台记录警告。不受控制的输入或非 React 的普通 HTML5 表单不会显示此警告。

查看 React 源代码中的 DOMPropertyOperations.setValueForProperty()，特别是 <input>s 的第 162 行（在 v15.3.0 中）。

Answer 2

您的输入标签在<form> 中吗？在表单元素中添加 novalidate 属性以禁用 HTML5 验证。你确定这是 HTML5 验证吗？我不记得 HTML5 验证将错误放在控制台中。

听起来您真的想谴责用户的输入以防止错误消息很快出现。有几个库可以为您做到这一点。