Configuración de onSubmit en React.js

97

Al enviar un formulario, lo intento en doSomething()lugar del comportamiento de publicación predeterminado.

Aparentemente, en React, onSubmit es un evento compatible con formularios. Sin embargo, cuando pruebo el siguiente código:

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

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

El método doSomething()se ejecuta, pero a partir de entonces, el comportamiento de publicación predeterminado todavía se lleva a cabo.

Puedes probar esto en mi jsfiddle .

Mi pregunta: ¿Cómo evito el comportamiento de publicación predeterminado?

— Lucas du Toit
fuente

118

En su doSomething()función, pase el evento ey use e.preventDefault().

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

— Henrik Andersson
fuente

18

A partir de la versión 0.13, se ignorará la devolución de falso de los controladores de eventos, por lo que tendrá que usar e.preventDefault () o e.stopPropagation ()

— joshuaegclark

1

Como se respondió, se prefiere este último.

— Henrik Andersson

Creo que te refieres al primero

— Shark Lasers

@SharkLasers Ese comentario se hizo en una edición de esta publicación que ya no está disponible.

— Henrik Andersson

Sin embargo, es justo que deba eliminar los comentarios cuando ya no sean relevantes.

— Láseres de tiburón

46

También sugiero mover el controlador de eventos fuera de render.

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
fuente

1

Esta es la forma correcta de usar la forma en el componente :)

— holms

15

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

funciona bien para mi

— Truong
fuente

5

Puede pasar el evento como argumento a la función y luego evitar el comportamiento predeterminado.

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
fuente

2

En mi caso, funciona con y sin this: {this.doSomething}o {doSomething}está bien porque doSomethingestá dentro del render().

— starikovs