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?

— 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