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 处理程序？

原文由 Ahmed Kooli 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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>

原文由 Karol Dabrowski 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

我在这方面取得了成功。这会在单击时触发 handleSubmit。希望这可以帮助。

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

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

原文由 Melvin 发布，翻译遵循 CC BY-SA 4.0 许可协议