Configurando onSubmit em React.js

97

No envio de um formulário, estou tentando, em doSomething()vez do comportamento de postagem padrão.

Aparentemente, no React, onSubmit é um evento com suporte para formulários. No entanto, quando tento o seguinte código:

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

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

O método doSomething()é executado, mas depois disso, o comportamento de postagem padrão ainda é executado.

Você pode testar isso no meu jsfiddle .

Minha pergunta: Como posso evitar o comportamento de postagem padrão?

Lucas du toit
fonte

Respostas:

118

Em sua doSomething()função, passe o evento ee use e.preventDefault().

doSomething = function (e) {
    alert('it works!');
    e.preventDefault();
}
Henrik Andersson
fonte
18
A partir da v0.13, retornar false de manipuladores de eventos será ignorado, então você terá que usar e.preventDefault () ou e.stopPropagation ()
joshuaegclark
1
Conforme respondido, o último é o preferido.
Henrik Andersson
Acho que você quer dizer o primeiro
Lasers de tubarão,
@SharkLasers Esse comentário foi feito em uma edição desta postagem que não está mais disponível.
Henrik Andersson
É justo, você provavelmente deve excluir os comentários quando eles não forem mais relevantes.
Shark Lasers de
46

Também sugiro mover o manipulador de eventos para fora da renderização.

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
fonte
1
Esta é a maneira correta de usar o formulário no componente :)
holms
15
<form onSubmit={(e) => {this.doSomething(); e.preventDefault();}}></form>

funciona bem para mim

Truong
fonte
5

Você pode passar o evento como argumento para a função e evitar o comportamento padrão.

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
fonte
2
No meu caso, funciona com e sem this: {this.doSomething}ou {doSomething}está bem porque doSomethingestá dentro do render().
starikovs