Mengatur onSubmit di React.js

97

Saat mengirimkan formulir, saya mencoba untuk doSomething()melakukan perilaku posting default.

Rupanya di React, onSubmit adalah acara yang didukung untuk formulir. Namun, ketika saya mencoba kode berikut:

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

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

Metode doSomething()dijalankan, tetapi setelah itu, perilaku posting default masih dijalankan.

Anda dapat menguji ini di jsfiddle saya .

Pertanyaan saya: Bagaimana cara mencegah perilaku posting default?

— Lucas du Toit
sumber

119

Dalam doSomething()fungsi Anda , teruskan acara edan gunakan e.preventDefault().

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

— Henrik Andersson
sumber

18

Mulai v0.13, mengembalikan false dari event handler akan diabaikan, jadi Anda harus menggunakan e.preventDefault () atau e.stopPropagation ()

— joshuaegclark

1

Seperti yang dijawab, yang terakhir lebih disukai.

— Henrik Andersson

Saya pikir yang Anda maksud adalah yang pertama

— Shark Lasers

@SharkLasers Komentar itu dibuat pada sunting kiriman ini yang tidak lagi tersedia.

— Henrik Andersson

Cukup adil, Anda mungkin harus menghapus komentar jika sudah tidak relevan lagi.

— Laser Hiu

46

Saya juga menyarankan untuk memindahkan event handler di luar 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>
    );
  }
});

— Adam Stone
sumber

1

Ini adalah cara yang tepat untuk menggunakan formulir dalam komponen :)

— holms

15

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

itu bekerja dengan baik untuk saya

— Truong
sumber

5

Anda bisa meneruskan kejadian sebagai argumen ke fungsi dan kemudian mencegah perilaku default.

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

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

— Bolza
sumber

2

Dalam kasus saya, ini bekerja dengan dan tanpa this: {this.doSomething}atau {doSomething}baik-baik saja karena doSomethingdengan render().

— starikovs