Réglage onSubmit dans React.js

Sur la soumission d'un formulaire, je suis en train de doSomething() au lieu de la valeur par défaut poste de comportement.

Apparemment à Réagir, onSubmit est un événement prise en charge pour les formulaires. Cependant, quand j'ai essayer 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é, mais, par la suite, la valeur par défaut poste comportement est toujours réalisée.

Vous pouvez le tester dans mon jsfiddle.

Ma question: Comment puis-je empêcher le défaut de poste de comportement?

InformationsquelleAutor Lucas du Toit | 2015-02-12
  1. 101

    Dans votre doSomething() fonction, passer dans le cas e et l'utilisation e.preventDefault().

    doSomething = function (e) {
    alert('it works!');
    e.preventDefault();
}
    • Comme de v0.13, retour faux de gestionnaires d'événements sera ignorée, de sorte que vous aurez à utiliser l'e.preventDefault() ou électronique.stopPropagation()
    • Comme réponse, ce dernier est préféré.
    InformationsquelleAutor Henrik Andersson
  2. 43

    Je voudrais aussi suggérer de déplacer le gestionnaire d'événement à l'extérieur de 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>
    );
  }
});
    • C'est de manière correcte, en utilisant le formulaire dans le volet 🙂
    InformationsquelleAutor Adam Stone
  3. 11
    <form onSubmit={(e) => {this.doSomething(); e.preventDefault();}}></form>

    il fonctionne très bien pour moi

    InformationsquelleAutor Truong
  4. 4

    Vous pouvez passer l'événement comme argument à la fonction, puis de prévenir 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>;
    }
});
    • Dans mon cas, il fonctionne avec et sans this: {this.doSomething} ou {doSomething} est bien parce que doSomething est dans le render().
    InformationsquelleAutor Bolza