React.js'de onSubmit'i ayarlama

97

Bir form gönderildiğinde doSomething(), varsayılan gönderi davranışı yerine yapmaya çalışıyorum .

Görünüşe göre React'te onSubmit formlar için desteklenen bir olaydır. Ancak, aşağıdaki kodu denediğimde:

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

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

Yöntem doSomething()çalıştırılır, ancak daha sonra varsayılan gönderme davranışı yine de gerçekleştirilir.

Bunu jsfiddle'ımda test edebilirsiniz .

Sorum: Varsayılan gönderi davranışını nasıl engellerim?

— Lucas du Toit
kaynak

119

Senin içinde doSomething()işlev durumunda geçmesi eve kullanıma e.preventDefault().

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

— Henrik Andersson
kaynak

19

V0.13'ten itibaren, olay işleyicilerinden false döndürme göz ardı edilecek, bu nedenle e.preventDefault () veya e.stopPropagation ()

— joshuaegclark,

1

Cevaplandığı gibi, ikincisi tercih edilir.

— Henrik Andersson

Sanırım eski demek istiyorsun

— Köpekbalığı Lazerleri

@SharkLasers Bu yorum, bu gönderinin artık mevcut olmayan bir düzenlemesine yapıldı.

— Henrik Andersson

Yeterince adil, ancak artık alakalı olmayan yorumları muhtemelen silmelisiniz.

— Köpekbalığı Lazerleri

46

Ayrıca olay işleyicisini render dışına taşımayı da öneririm.

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
kaynak

1

Bu, bileşende formu kullanmanın doğru yolu :)

— holms

15

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

benim için iyi çalışıyor

— Truong
kaynak

5

Olayı işleve bağımsız değişken olarak iletebilir ve ardından varsayılan davranışı engelleyebilirsiniz.

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
kaynak

2

Benim durumumda, onunla ve olmadan çalışır this: {this.doSomething}ya {doSomething}çünkü para cezası olduğu doSomethingwithing olduğunu render().

— starikovs