Einstellung onSubmit in React.js

Question

Bei der Übermittlung eines Formulars versuche ich doSomething() anstelle der Standard-Post-Verhalten.

Offenbar in Reaktion, onSubmit is a supported event for forms. Allerdings, wenn ich den folgenden Code versuchen:

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

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

Das Verfahren doSomething() ausgeführt wird, aber danach wird die Standardpost Verhalten noch durchgeführt.

Sie können dies in meinem jsfiddle testen.

Meine Frage: Wie verhindere ich das Standard-Post-Verhalten?

Answer 1

Geben Sie in Ihrer doSomething() Funktion das Ereignis e ein und verwenden Sie e.preventDefault().

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

Answer 2

Sie können das Ereignis als Argument an die Funktion übergeben und dann das Standardverhalten verhindern.

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

Ich würde auch vorschlagen, den Event-Handler außerhalb Rendern zu verschieben.

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> 

es für mich