如何在 ReactJS 中的输入字段 onBlur 事件上提交表单？

【问题标题】：How to submit a form on input field onBlur event in ReactJS?如何在 ReactJS 中的输入字段 onBlur 事件上提交表单？
【发布时间】：2018-10-27 17:31:57
【问题描述】：

我在一个屏幕中有多个表单。需要在不使用 ref 的情况下调用 onBlur 事件时提交表单，因为我有多个动态表单。

【问题讨论】：

您仍然可以将 ref 与多种形式一起使用；你试过吗？
感谢您的回复，克里斯。它是一种动态形式。

标签： forms reactjs jsx

【解决方案1】：

您可以添加 onBlur 事件，访问 DOM 元素表单，然后提交 'form.submit()'：

const myForm = () =>
    <input onBlur={(e) => {
  // if click occurs outside of element
      if(!e.relatedTarget || (e.target.form !== e.activeTarget)) 
  //attention: your page will reload every such instant submission
        e.target.form.submit();
      }
    }} ... (other props) >
    ...
 </form>

或者你需要使用

<form onSubmit={(e) => {
             e.preventDefault();
             ...
}>
    <input onBlur={(e) => {
             ...
             e.target.form.requestSubmit();
    } />
        
...

这个解决方案的细节在这里Here is my question

【讨论】：