web-dev-qa-db-fra.com

Réglage sur Soumettre dans React.js

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

Apparemment dans React, onSubmit est un événement pris en charge pour les formulaires. Cependant, lorsque j'essaie 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 exécuté.

Vous pouvez tester cela dans mon jsfiddle .

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

javascriptformsform-submitreactjsonsubmit
88
Lucas du Toit

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

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

Je suggère é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>
    );
  }
});
44
Adam Stone
<form onSubmit={(e) => {this.doSomething(); e.preventDefault();}}></form>

ça marche bien pour moi

11
Truong

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