React 如何在输入模糊时触发表单提交？

Question

我正在尝试使用 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 电子邮件验证检查？

Answer 1

在您的表单上放置一个 ref 属性并调用提交功能：

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

添加功能：

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

Answer 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 如何在输入模糊时触发表单提交？

React how to trigger form submit on input blur?

html

javascript

forms

onblur

reactjs