React.js和HTML5电子邮件验证

Question

我在我的React组件中有一个电子邮件输入框：

                <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会重新验证它。将类型更改为“文本”可以解决此问题，但我希望将其保留为“电子邮件”。在React中处理这个问题的正确方式是什么，以避免这些HTML5警告呢？

- Stewie Griffin

---

顺便提一下，使用这个库 https://github.com/prometheusresearch/react-forms 可以更轻松地完成 React 表单。 - Ashish Chaudhary

Answer 1

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

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

- Jake Wisse

Answer 2

您的输入标签是否在<form>中？为了禁用HTML5验证，请向表单元素添加novalidate属性。但您确定这是HTML5验证吗？我不记得HTML5验证会在控制台中输出错误信息。

听起来您真的希望驳回用户输入，以防错误消息过早弹出。有几个库可以为您完成此操作。

- Ben Smith

---

你说得对，这不是 HTML5 验证（消息看起来像是 HTML5），而是来自 React 的控制台警告。添加 noValidate 没有起作用。 - Stewie Griffin

在我的情况下，这样做是有效的，我使用了：<Form noValidate> .... </Form> - undefined