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

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