Question

在提交表单时，我尝试doSomething()而不是默认的帖子行为。

显然在React，onSubmit is a supported event for forms.但是，当我尝试以下代码时：

var OnSubmitTest = React.createClass({
    render: function() {
        doSomething = function(){
           alert('it works!');
        }

        return <form onSubmit={doSomething}>
        <button>Click me</button>
        </form>;
    }
});

运行方法doSomething()，但此后仍然执行默认的帖子行为。

您可以在jsfiddle。

中对此进行测试

我的问题：如何阻止默认的帖子行为？

Answer 1

在doSomething()功能中，传递活动e并使用e.preventDefault()。

doSomething = function (e) {
    alert('it works!');
    e.preventDefault();
}

Answer 2

我还建议将事件处理程序移到render之外。

var OnSubmitTest = React.createClass({

  submit: function(e){
    e.preventDefault();
    alert('it works!');
  }

  render: function() {
    return (
      <form onSubmit={this.submit}>
        <button>Click me</button>
      </form>
    );
  }
});

Answer 3

<form onSubmit={(e) => {this.doSomething(); e.preventDefault();}}></form>

它适用于我

Answer 4

您可以将事件作为参数传递给函数，然后阻止默认行为。

var OnSubmitTest = React.createClass({
        render: function() {
        doSomething = function(event){
           event.preventDefault();
           alert('it works!');
        }

        return <form onSubmit={this.doSomething}>
        <button>Click me</button>
        </form>;
    }
});

在React.js中设置onSubmit

4 个答案: