如何使用 form.submit() 防止页面重新加载以在 ReactJs 中作为方法提交

Question

如何在 ReactJS 中以编程方式防止在触发表单提交时刷新页面？我试过这段代码：

const myForm = () =>
    <form onBlur={(e) => {
      if(!e.relatedTarget || (e.relatedTarget.form !== e.activeTarget)) 

        e.currentTarget.submit((e) => {
          e.preventDefault();// page reloads before this callback
          debugger
        });
      }
    }}
    onSubmit={(e) => {
      e.preventDefault();//// page reloads before this event
      debugger
    }}>
    ...
 </form>

我的目标是从此表单提交 onBlur 表单（当用户填写所有字段并在表单外部单击时）

我已经检查了这些解决方案，但它们不起作用：

Prevent page reload when submit

我不考虑 iframe Submit form without page reloading

Answer 1

使用应该使用e.currentTarget.requestSubmit() (docs). Read about differences with submit method here.

或者您可以简单地定义一个提交处理程序函数并将其提供给 onBlur 和 onSubmit 表单属性。

const handleSubmit = (ev) => {
  ev.preventDefault()
  ... 
}

return (
  <form 
    onBlur={(ev) => if (shouldSubmit(ev)) handleSubmit(ev)}
    onSubmit={handleSubmit}
  >
  ...
  </form>
)

无需诉诸本机表单提交。如果您的用例允许的话。

如何使用 form.submit() 防止页面重新加载以在 ReactJs 中作为方法提交

How to prevent page reload using form.submit() to submit as a method in ReactJs

javascript

dom-events

reactjs