it-swarm.com.de

Einstellung onSubmit in React.js

Beim Absenden eines Formulars versuche ich, doSomething() anstelle des Standardverhaltens für Posts zu verwenden.

Offensichtlich in React, onSubmit ist 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 immer noch das Standard-Post-Verhalten ausgeführt.

Sie können dies in meinem jsfiddle testen.

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

88
Lucas du Toit

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

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

Ich würde auch vorschlagen, den Ereignishandler außerhalb von Render 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>
    );
  }
});
44
Adam Stone
<form onSubmit={(e) => {this.doSomething(); e.preventDefault();}}></form>

es funktioniert gut für mich

11
Truong

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>;
    }
});
4
Bolza