Wie Form Eintrag in <input type = einreichen> auf Klick zu verhindern, mit Reagieren

Question

Ich habe dies in meiner jsx Datei: Button Eintrag

<input type="submit" onClick={() => this.validateForm()} id="account-submit" value="Sign Up" /> 

Die Funktion validateForm aufgerufen wird, das Standardverhalten, sondern danach, einreichen Das Formular ist fertig, so dass ein erneutes Laden der Seite erfolgt. Wie kann ich nur die onClick-Funktion auslösen und verhindern, dass die Übergabe stattfindet, um ein erneutes Laden zu verhindern?

EDIT - Hinzu basierend auf Antwort

validateForm: function (e) { 
    e.preventDefault(); 
} 

e undefiniert

Answer 1

Sie e.preventDefault() verwenden können.

<input type="submit" onClick={this.validateForm} id="account-submit" value="Sign Up" />

Und in der validateForm Funktion: Sie können Ihr input Element wie verändern

validateForm = e => { 
    e.preventDefault(); 
    // your code here 
} 

Update:

Wenn Sie auf den Pfeil-Funktion in der validateForm wie mein Beispiel Ich glaube, es wird gut funktionieren.

Wenn Sie den function(e) wie Ihren hinzugefügten Code verwenden möchten, sollten Sie ein paar Dinge ändern. In Ihrem input tag:

<input type="submit" onClick={e => this.validateForm(e)} id="account-submit" value="Sign Up" />

in Ihrer validateForm Funktion:

validateForm = function(e) { 
    console.log('Hello world'); 
    console.log(e); 
} 

Der obige Code funktioniert gut für mich. Sie sollten die Unterschiede wirklich verstehen, wenn Sie die Pfeilfunktion (in ES6 bereitstellen) und die normale Funktion verwenden (in älteren ES bereitstellen). Wenn Sie nicht wissen, was die Pfeilfunktion ist, ist es Zeit, Ihr Wissen zu erweitern.

Viel Glück und Code Spaß!

Answer 2

Ich erläutere gerade was @ delig29 gerade gesagt hat.

Wenn Sie eine <input type="submit" onClick={this.onSubmitForm} /> machen Die OnClick-Funktion für den Senden-Button sendet ein Ereignis und übergibt es an die OnClick-Methode, die this.onSubmitForm ist.

Wenn Sie definieren diese Funktion, die so etwas wie dieses

onSubmitForm = (e) => { // Here I am passing e(event) as a @param 
    // This method call of the event **preventDefault** will 
    // trigger an event which will disable the browsers default behavior 
    // to reload the page on hitting form submit 
    e.preventDefault(); 
    /** 
    ** Do Whatever You Want Here With Your Code 
    **/ 
}