Impostazione onSubmit in React.js

Question

Su invio di un modulo, sto cercando di doSomething() invece del comportamento post predefinito.

A quanto pare in Reagire, onSubmit is a supported event for forms. 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() è gestito, ma da allora in poi, il comportamento post predefinito è ancora effettuata.

È possibile verificare questo nel mio jsfiddle.

La mia domanda: come si impedisce il comportamento post predefinito?

Answer 1

Nella funzione doSomething(), passano in caso e e utilizzare e.preventDefault().

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

Answer 2

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

Answer 3

Vorrei anche suggerire di spostare il gestore di eventi all'esterno del 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> 
    ); 
    } 
}); 

Answer 4

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

funzionerà bene per me