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电子邮件验证消息，因为我通过每次击键改变其状态，反应重新渲染它，HTML5重新验证它。将类型更改为“文本”可以修复它，但我希望将其保留为“电子邮件”。为了避免那些html5警告，有什么方法可以做出反应来处理这个问题？

Answer 1

对于受控输入，最终React必须调用Element.prototype.setAttribute()，至少在Chrome 52中（我还没有使用其他浏览器测试），这会导致向控制台记录警告。此警告不会显示不受控制的输入，也不显示非React，vanilla HTML5表单。

查看React源中的DOMPropertyOperations.setValueForProperty()，特别是<input>的第162行（第15.3.0节）。

Answer 2

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

听起来你真的想要退出用户输入以防止错误消息即将发布。有几个库可以为你做到这一点。

React.js和HTML5电子邮件验证

2 个答案: