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?

javascript forms form-submit reactjs onsubmit Lucas du Toit
sumber

Jawaban:

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