web-dev-qa-db-ja.com

React.jsでonSubmitを設定する

フォームの送信時に、デフォルトの投稿動作の代わりにdoSomething()を試みています。

どうやらReactでは、 onSubmitはフォームでサポートされているイベントです ただし、次のコードを試すと：

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

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

メソッドdoSomething()が実行されますが、その後、デフォルトのpost動作が引き続き実行されます。

これは jsfiddle でテストできます。

私の質問：デフォルトの投稿動作を防ぐにはどうすればよいですか？

javascriptformsform-submitreactjsonsubmit
84
Lucas du Toit

doSomething()関数で、イベントeを渡し、e.preventDefault()を使用します。

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

また、イベントハンドラーをレンダリングの外に移動することをお勧めします。

var OnSubmitTest = React.createClass({

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

  render: function() {
    return (
      <form onSubmit={this.submit}>
        <button>Click me</button>
      </form>
    );
  }
});
43
Adam Stone
<form onSubmit={(e) => {this.doSomething(); e.preventDefault();}}></form>

それは私のためにうまくいきます

11
Truong

イベントを関数の引数として渡し、デフォルトの動作を防ぐことができます。

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

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