javascript - form - Establecer onSubmit en React.js

react select example

Question

Al enviar un formulario, estoy tratando de hacer algo doSomething() lugar del comportamiento de publicación predeterminado.

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

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

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

Se ejecuta el método doSomething() , 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?

Answer 1

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

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

Answer 2

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>;
    }
});

Answer 3

También sugeriría mover el controlador de eventos fuera del 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>
    );
  }
});

Answer 4

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

funciona bien para mi