在React.js中設置onSubmit

Question

在提交表單時，我正在嘗試執行doSomething()而不是默認的帖子行為。

顯然在React中， onSubmit是表單支持的事件。 但是，當我嘗試以下代碼時：

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>;
    }
});