Ustawienie onSubmit w React.js

97

Po przesłaniu formularza próbuję doSomething()zamiast domyślnego zachowania postu.

Najwyraźniej w React onSubmit jest zdarzeniem obsługiwanym przez formularze. Jednak gdy spróbuję poniższego kodu:

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

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

Metoda doSomething()jest uruchamiana, ale później nadal wykonywane jest domyślne zachowanie wiadomości.

Możesz to przetestować w moim jsfiddle .

Moje pytanie: Jak zapobiec domyślnemu zachowaniu postów?

— Lucas du Toit
źródło

119

W swojej doSomething()funkcji podaj zdarzenie ei użyj e.preventDefault().

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

— Henrik Andersson
źródło

19

Od wersji 0.13 zwracanie wartości false z obsługi zdarzeń będzie ignorowane, więc będziesz musiał użyć e.preventDefault () lub e.stopPropagation ()

— joshuaegclark

1

Zgodnie z odpowiedzią preferowane jest to drugie.

— Henrik Andersson

Myślę, że masz na myśli tego pierwszego

— Shark Lasers

@SharkLasers Ten komentarz dotyczy zmiany tego posta, która nie jest już dostępna.

— Henrik Andersson

W porządku, prawdopodobnie powinieneś usuwać komentarze, gdy nie są już istotne.

— Shark Lasers

46

Sugerowałbym również przeniesienie obsługi zdarzeń poza renderowanie.

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
źródło

1

To jest właściwy sposób wykorzystania formy w komponencie :)

— holms

15

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

to działa dobrze dla mnie

— Truong
źródło

5

Możesz przekazać zdarzenie jako argument do funkcji, a następnie zapobiec domyślnemu zachowaniu.

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
źródło

2

W moim przypadku działa zi bez this: {this.doSomething}lub {doSomething}jest w porządku, ponieważ doSomethingjest z render().

— starikovs