Ustawienie opcji Wyślij w pliku React.js

Question

Po przesłaniu formularza próbuję wykonać doSomething() zamiast domyślnego zachowania wpisu.

Podobno w React, onSubmit is a supported event for forms. Jednak kiedy próbuję następujący kod:

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

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

Sposób doSomething() jest uruchamiany, ale potem, domyślne zachowanie post jest nadal prowadzone.

Możesz to przetestować w moim jsfiddle.

Moje pytanie: Jak zapobiec domyślnemu zachowaniu się postu?

Answer 1

W swojej funkcji należy przekazać zdarzenie e i użyć e.preventDefault().

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

Answer 2

można przekazać zdarzenia jako argument do funkcji, a następnie zapobiec zachowanie domyślne.

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

Proponuję również przenieść obsługę zdarzeń poza 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> 

to działa dobrze dla mnie