首页 文章

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

提问于
浏览
14

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

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

my problem is : onSubmit handler is not being fired after the form submit .

这是我为此目的剪辑的代码:

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

6 回答

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

  • 2

    我有同样的问题,但无法解决它 . 不管我做了什么,做 document.querySelector('form').submit() 都不会触发 onSubmit 处理程序 . 我尝试包含一个看不见的 <input type="submit"> ,但仍然不会触发它 . 所以我只是更改为保持隐形提交( style="display:none" ),然后在该隐形提交按钮上执行 .click() ,令人惊讶的是它甚至可以用 display:none 工作 . 我只在Firefox中测试过 .

  • 2

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

    我相信实现这一目标的惯用方法是将JSX / HTML结构化为使用 <button><input> 类型的提交 . 其中任何一个都会触发你的 handleSubmit 处理程序 . 在我看来,它将降低复杂性,巩固您的处理程序,并且似乎是您最好的解决方案 .

    例如

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

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

  • 2

    您不应期望表单引用默认情况下为您附加一个附加回调 submit . 当使用以编程方式设置DOM元素 refs 之类的东西时,这将是框架的糟糕设计 .

    您应该使用 ref 以您想要的任何顺序实例化所需的所有事件,而不是依赖 ref [由 form 元素实例化]的无法实现的内部实现 .

    这有效:

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

    实际 submit 应始终最后出现 .

  • 0

    这与React无关 . 它是DOM API的"feature": .submit() 方法实际上不会触发 submit 事件,也不会触发输入验证 . 见http://codetheory.in/javascript-fire-onsubmit-by-calling-form-submit/ .

    正如建议的那样,可能的解决方法是创建一个提交按钮,并以编程方式在其上调用 .click() . 或者,您可以使用 new Event() 以编程方式创建 submit 事件,并使用 .dispatchEvent() 进行调度 . 但是, new Event() 在IE中不可用 .

  • 2

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

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

相关问题