Forms React.js:以编程方式提交表单不会触发onSubmit事件

我想在点击链接后提交一份React表单

为此，如果单击链接，我需要以编程方式提交表单

我的问题是：

onSubmit

处理程序在表单提交后没有被激发。

以下是我为此而制作的代码片段：

var MyForm = React.createClass({
  handleSubmit: function(e){
    console.log('Form submited');
     e.preventDefault();
  },
  submitForm : function(e){
    this.refs.formToSubmit.submit();
  },
  render: function() {
    return (
    <form ref="formToSubmit" onSubmit={this.handleSubmit}>
    <input name='myInput'/>
    <a onClick={this.submitForm}>Validate</a>
    </form>);
  }
});

ReactDOM.render(
  <MyForm name="World" />,
  document.getElementById('container')
);

var MyForm=React.createClass({
handleSubmit:函数（e）{
console.log（“提交的表单”）；
e、 预防默认值（）；
},
提交形式：函数（e）{
this.refs.formToSubmit.submit（）；
},
render:function（）{
返回(
验证
);
}
});
ReactDOM.render(
,
document.getElementById（'容器'）
);

不会调用

handleSubmit

，并执行默认行为（正在提交的表单）。 这是ReactJs错误还是正常行为？

---

是否有方法调用onSubmit处理程序？

您应该使用类型为submit的输入标记，而不是anchor标记，因为anchor标记不会触发submit事件

render: function() {
  return (
    <form ref="formToSubmit" onSubmit={this.handleSubmit}>
       <input name='myInput'/>
       <input onClick={this.submitForm} type="submit" value="Validate" />
    </form>
  );
}

render:function（）{
返回(
);
}

我也有同样的问题，但无法解决。无论我做了什么，执行

document.querySelector（'form'）.submit（）

都不会触发

onSubmit

处理程序。我尝试包含一个不可见的

，但仍然

。submit（）

不会触发它。所以我改为保留不可见的提交（

style=“display:none”

），然后执行

。在不可见的提交按钮上单击（）

，令人惊讶的是，它甚至可以与

display:none

一起工作。不过我只在Firefox中进行了测试。

您当前的

onSubmit

绑定到React的触发，而不是原生表单提交事件。这就解释了为什么

this.refs.formToSubmit.submit（）未触发处理程序。据我所知，试图手动触发该事件不是一个推荐的或值得追求的目标

我相信实现这一点的惯用方法是构造JSX/HTML，使用submit类型的
或
。其中任何一个都将触发您的
handleSubmit
处理程序。在我看来，它将降低复杂性，整合您的处理程序，并且似乎是您的最佳解决方案

e、 g



验证
默认情况下，您不应该期望表单引用为您的
submit
附加一个回调。当使用以编程方式设置的东西（如DOM元素
refs
）时，这将是糟糕的框架设计

您应该使用
ref
以您想要的任何顺序实例化您需要的所有事件，而不是依赖
ref
[当由
表单
元素实例化时]的未知内部实现

这项工作：

this.refs.formToSubmit.onSubmit();
this.refs.formToSubmit.submit();

实际的
submit
应该总是最后一个出现。
我成功地做到了这一点。这会在单击时触发handleSubmit。希望这有帮助

<form
  onSubmit={this.handleSubmit}
  ref={ (ref) => { this.form = ref; } }
>
    <a onClick={ () => { this.form.dispatchEvent(new Event('submit')) } }>
        Validate
    </a>
</form>

{this.form=ref；}
>
这与反应无关。这是DOM API的一个“特性：
.submit（）
方法实际上不会触发
submit
事件，也不会触发输入验证。看

根据建议，可能的解决方法是创建一个提交按钮，并以编程方式调用
。单击它（）。
或者，您可以使用
newevent（）
以编程方式创建一个
submit
事件，并使用
.dispatchEvent（）
发送它。但是，
new Event（）
在IE中不可用。
您希望使用
dispatchEvent（new Event（'submit'））
而不是
submit（）
。只需相应地更换即可。
更新2021

接受答案的解决方案对我不起作用，因此我决定更新此主题

React 16岁（及以上）

在原始答案中，缺少事件构造函数的第二个参数。如果没有
{cancelable:true}
参数，则无法运行
preventDefault（）
方法

<div>
    <form onSubmit={e => e.preventDefault()} ref={ref => this.form = ref}>
        <input name="tmp" />
    </form>

    <button onClick={e => this.form.dispatchEvent(
        new Event("submit", { cancelable: true })
    )}>
        Submit form
    </button>
</div>

使用输入标记提交表单不是“以编程方式提交”。您找到解决方案了吗？我也有同样的问题。解决这个问题的合乎逻辑的方法是@matt kahl提出的。链接不应提交表单。按钮应该用于提交表单。我之所以添加此注释，是因为从html标准的角度来看，选择的答案不是最佳的解决方案。@ius此问题更多的是关于“以编程方式提交表单”。链接只是一个例子。在某些特殊情况下，您希望在填写完所有字段后或拖放操作后提交表单。。。这些技术特别适用于用户界面复杂的移动应用程序。@AhmedKooli我现在明白你的意思了。我对有人通过js使用链接触发表单感到有点困惑，而这只需使用一个按钮即可完成。但我现在明白了，链接只是一个演示。谢谢你的澄清！这是我对React的主要抱怨之一。它强制执行一个严格的、天真的、不切实际的惯用结构。如果一个人只是简单地提交一个联系人或登记表，当然，只需点击一个按钮就可以了。但更复杂的应用程序可能会，例如，在输入模糊或选择选项时自动保存一个复杂表单，并且Redux和React似乎可以很好地配对，以防止您在没有黑客解决方法的情况下完成此操作。请为未来的查看者详细说明：Do
{this.submitButtonRefOrWhateverYouWannaCallIt=node；}}>Validate
然后在处理程序中：
this.submitButtonRefOrWhateverYouWannaCallIt.click（）这是一个黑客，但它可以工作（在Chrome上测试）。使用react触发隐藏按钮：this.refs.submithindButton.click（）；如果上述方法对任何人都不起作用，那么请尝试使用-ReactDOM.findDOMNode（this.form）.dispatchEvent（新事件（“su”）
<div>
    <form onSubmit={e => e.preventDefault()} ref={ref => this.form = ref}>
        <input name="tmp" />
    </form>

    <button onClick={e => this.form.dispatchEvent(
        new Event("submit", { cancelable: true, bubbles: true })
    )}>
        Submit form
    </button>
</div>