反应如何在输入模糊时触发表单提交？答案

【问题标题】：React how to trigger form submit on input blur?反应如何在输入模糊时触发表单提交？
【发布时间】：2018-10-05 12:22:00
【问题描述】：

我正在尝试使用 HTML5 <input type="email" /> 验证检查。

我可以让它正常工作：

<form>
  <input type="email" />
  <input type="submit" />
</form>

这会在单击 sumbit 按钮时进行验证。但是，我想在 email 字段模糊后触发表单提交。

如何在没有提交按钮onBlur 的情况下触发表单？

像这样：

<form>
  <input type="email" onBlur={/* trigger form submission */} />
</form>

或者，是否有更好的方法在输入模糊时执行 HTML5 电子邮件验证检查？

【问题讨论】：

标签： javascript html reactjs forms onblur

【解决方案1】：

在您的表单上添加ref 属性并调用提交函数：

<form ref="myForm">
  <input type="email" onBlur={this.submitForm.bind(this)} />
</form>

添加功能：

submitForm(){
  this.refs['myForm'].submit()
}

【讨论】：

谢谢老兄！非常感谢快速简单的答案！
如果你使用最新的 react post v16，最好使用文档中提到的 refs：reactjs.org/docs/refs-and-the-dom.html
我确实遇到了问题。我得到submit 没有定义。
@BarryMichaelDoyle 我也一样。你是怎么解决的？

【解决方案2】：

使用原生的checkValidity方法

<form>
  <input type="email" id="a" />
</form>

const a = document.querySelector('#a')


a.addEventListener('blur', e => {
const isValid =  e.target.checkValidity()
console.log(isValid)
})

【讨论】：

哦，没注意到你在使用 react。要访问 DOM，请改用 ref。
感谢您的回复，我已同意 Manav 的回答
这适用于验证和生成验证错误消息，但是如何显示验证错误工具提示？