Einstellen von onSubmit in React.js

97

Beim Absenden eines Formulars versuche ich, doSomething()anstelle des Standard-Post-Verhaltens.

Anscheinend ist onSubmit in React ein unterstütztes Ereignis für Formulare. Wenn ich jedoch den folgenden Code versuche:

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

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

Die Methode doSomething()wird ausgeführt, danach wird jedoch weiterhin das Standardverhalten nach dem Ausführen ausgeführt.

Sie können dies in meiner jsfiddle testen .

Meine Frage: Wie verhindere ich das Standard-Post-Verhalten?

javascript forms form-submit reactjs onsubmit Lucas du Toit
quelle

118

Übergeben Sie in Ihrer doSomething()Funktion das Ereignis eund verwenden Sie es e.preventDefault().

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

Henrik Andersson
quelle

18

Ab Version 0.13 wird die Rückgabe von false von Ereignishandlern ignoriert, sodass Sie e.preventDefault () oder e.stopPropagation ()

joshuaegclark

1

Wie beantwortet, ist letzteres bevorzugt.

Henrik Andersson

Ich denke du meinst das erstere

Shark Lasers

@SharkLasers Dieser Kommentar wurde zu einer Bearbeitung dieses Beitrags abgegeben, die nicht mehr verfügbar ist.

Henrik Andersson

Fairerweise sollten Sie Kommentare wahrscheinlich löschen, wenn sie nicht mehr relevant sind.

Haifischlaser

46

Ich würde auch vorschlagen, den Ereignishandler außerhalb des Renderns zu verschieben.

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
quelle

1

Dies ist die richtige Art, Form in Komponente zu verwenden :)

Holms

15

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

es funktioniert gut für mich

Truong
quelle

5

Sie können das Ereignis als Argument an die Funktion übergeben und dann das Standardverhalten verhindern.

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
quelle

2

In meinem Fall funktioniert es mit und ohne this: {this.doSomething}oder {doSomething}ist in Ordnung, weil doSomethingmit dem render().

Starikovs

Einstellen von onSubmit in React.js

Antworten: