Impostare onSubmit in React.js

97

All'invio di un modulo, sto cercando di doSomething()sostituire il comportamento predefinito del post.

Apparentemente in React, onSubmit è un evento supportato per i moduli. Tuttavia, quando provo il seguente codice:

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

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

Il metodo doSomething()viene eseguito, ma in seguito viene comunque eseguito il comportamento predefinito del post.

Puoi testarlo nel mio jsfiddle .

La mia domanda: come posso impedire il comportamento predefinito del post?

— Lucas du Toit
fonte

118

Nella tua doSomething()funzione, passa l'evento ee usa e.preventDefault().

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

— Henrik Andersson
fonte

18

A partire dalla v0.13, la restituzione di false dai gestori di eventi verrà ignorata, quindi dovrai utilizzare e.preventDefault () o e.stopPropagation ()

— joshuaegclark,

1

Come risposta, quest'ultimo è preferito.

— Henrik Andersson

Penso che tu intenda il primo

— Shark Lasers

@SharkLasers Quel commento è stato fatto su una modifica di questo post che non è più disponibile.

— Henrik Andersson

Abbastanza giusto, probabilmente dovresti eliminare i commenti quando non sono più rilevanti.

— Shark Lasers

46

Suggerirei anche di spostare il gestore di eventi fuori dal rendering.

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

Questo è il modo corretto di usare la forma nel componente :)

— holms

15

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

funziona bene per me

— Truong
fonte

5

È possibile passare l'evento come argomento alla funzione e quindi impedire il comportamento predefinito.

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

Nel mio caso, funziona con e senza this: {this.doSomething}o {doSomething}va bene perché doSomethingè con il file render().

— starikovs