Einstellung onSubmit in React.js

Auf die Einreichung einer form, die ich bin versucht zu doSomething() anstelle der Standard-post-Verhalten.

Scheinbar Reagieren, onSubmit ist ein unterstütztes Ereignis für Formulare. Jedoch, wenn ich versuche, den folgenden code:

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

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

Die Methode doSomething() ausgeführt wird, aber danach werden die Standard-post-Verhalten ist immer noch durchgeführt.

Sie können dies testen, in meinem jsfiddle.

Meine Frage: Wie kann ich verhindern, dass die Standard-post-Verhalten?

InformationsquelleAutor der Frage Lucas du Toit | 2015-02-12

  1. 81

    In Ihrem doSomething() Funktion, pass in die Veranstaltung e und verwenden e.preventDefault().

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

    InformationsquelleAutor der Antwort Henrik Andersson

  2. 38

    Ich würde auch vorschlagen, bewegen Sie den event-handler außerhalb machen.

    var OnSubmitTest = React.createClass({

  submit: function(e){
    e.preventDefault();
    alert('it works!');
  }

  render: function() {
    return (
      <form onSubmit={this.submit}>
        <button>Click me</button>
      </form>
    );
  }
});

    InformationsquelleAutor der Antwort Adam Stone

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

    es funktioniert gut für mich

    InformationsquelleAutor der Antwort Truong

  4. 4

    Übergeben Sie den Fall als argument an die Funktion und dann verhindern, dass das default-Verhalten.

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

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

    InformationsquelleAutor der Antwort Bolza

Schreibe einen Kommentar