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

  • Z时代
  • 2024-01-10
  • 分类：问答

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

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

这是我为此目的编写的代码片段：

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

回答：

我成功了。单击后触发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

以上是 React.js：以编程方式提交表单不会触发onSubmit事件 的全部内容， 来源链接： utcz.com/qa/404216.html

回到顶部