React.jsでのonSubmitの設定

97

フォームの送信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でテストできます。

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

— ルーカスデュトワ
ソース

118

あなたにはdoSomething()機能、イベントに渡すeと使用e.preventDefault()。

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

— ヘンリック・アンダーソン
ソース

18

v0.13以降、イベントハンドラーからfalseを返すことは無視されるため、e.preventDefault（）またはe.stopPropagation（）を使用する必要があります

— joshuaegclark

1

回答したとおり、後者が推奨されます。

— Henrik Andersson、

前者のことだと思います

— Shark Lasers

@SharkLasersそのコメントは、現在利用できないこの投稿の編集に対して行われました。

— Henrik Andersson

十分に公平ですが、関連性がなくなったコメントは削除する必要があります。

— Shark Lasers

46

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

var OnSubmitTest = React.createClass({

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

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

— アダム・ストーン
ソース

1

これは、コンポーネントでフォームを使用する適切な方法です。:)

— ホルムズ2017年

15

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

それは私にとってはうまくいきます

— チュオン
ソース

5

イベントを引数として関数に渡し、デフォルトの動作を回避できます。

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

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

— ボルザ
ソース

2

私の場合、それはしてとせずに動作しますthis：{this.doSomething}または{doSomething}ので大丈夫ですdoSomethingwithingされますrender()。

— starikovs 2016