Définition de onSubmit dans React.js

97

Lors de la soumission d'un formulaire, j'essaie de doSomething()remplacer le comportement de publication par défaut.

Apparemment, dans React, onSubmit est un événement pris en charge pour les formulaires. Cependant, lorsque j'essaye le code suivant:

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

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

La méthode doSomething()est exécutée, mais par la suite, le comportement de publication par défaut est toujours appliqué.

Vous pouvez tester cela dans mon jsfiddle .

Ma question: comment éviter le comportement de publication par défaut?

— Lucas du Toit
source

118

Dans votre doSomething()fonction, passez l'événement eet utilisez e.preventDefault().

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

— Henrik Andersson
source

18

À partir de la v0.13, le retour de false à partir des gestionnaires d'événements sera ignoré, vous devrez donc utiliser e.preventDefault () ou e.stopPropagation ()

— joshuaegclark

1

Comme répondu, ce dernier est préféré.

— Henrik Andersson

Je pense que vous voulez dire l'ancien

— Shark Lasers

@SharkLasers Ce commentaire a été fait sur une modification de ce message qui n'est plus disponible.

— Henrik Andersson

Assez juste, vous devriez probablement supprimer les commentaires lorsqu'ils ne sont plus pertinents.

— Shark Lasers

46

Je suggérerais également de déplacer le gestionnaire d'événements en dehors du rendu.

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
source

1

C'est une bonne façon d'utiliser le formulaire dans le composant :)

— holms

15

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

ça marche bien pour moi

— Truong
source

5

Vous pouvez passer l'événement en tant qu'argument à la fonction, puis empêcher le comportement par défaut.

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
source

2

Dans mon cas, cela fonctionne avec et sans this: {this.doSomething}ou {doSomething}c'est bien parce que doSomethingc'est avec le render().

— starikovs