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

Question

我想在点击链接后提交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')
);

在handleSubmit不调用并执行默认行为(提交表格).这是一个ReactJs错误还是正常行为？有没有办法调用onSubmit处理程序？

Answer 1

我已经成功了。单击后触发handleSubmit。希望这可以帮助。

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

从这里找到：https : //github.com/facebook/react/issues/6796

Answer 2

我有同样的问题，但无法解决。无论我做什么，做document.querySelector('form').submit()都不会触发onSubmit处理程序。我尝试包含一个 invisible <input type="submit">，但仍然.submit()不会触发它。所以我只是改为保留不可见的提交 ( style="display:none") 然后.click()在那个不可见的提交按钮上做，令人惊讶的是它甚至可以与display:none. 不过我只在 Firefox 中测试过。

Answer 3

您的当前onSubmit绑定到React SyntheticEvent的触发，而不是本地表单提交事件。这就解释了为什么this.refs.formToSubmit.submit();不触发您的处理程序。据我所知，尝试手动触发SyntheticEvent不是推荐的或不值得的追求。

我相信完成此操作的惯用方法是构造JSX / HTML以使用<button>或<input>类型的Submit 。这些都会触发您的handleSubmit处理程序。我认为，这将降低复杂性，巩固您的处理程序，并且似乎是您的最佳解决方案。

例如

• <input type="submit" value="Validate" />
• <button type="submit">Validate</button>

Answer 4

2021 年更新

接受的答案中的解决方案对我不起作用，所以我决定更新这个主题。

React 16（及更早版本）

在原始答案中，缺少 Event 构造函数的第二个参数。没有{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>

React 17（未来可能还有更新的版本）

在当前版本的 React (17) 中，事件委托发生了巨大的变化（详情请点击此处）。因此，上面的解决方案需要一个小的改进才能使用这个版本的库。这个变化就是bubbles: true参数。工作代码如下所示：

<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>