Ich möchte ein Reagieren-Formular nach einem Klick auf einen Link senden.
Dazu muss ich das Formular programmgesteuert senden, wenn auf den Link geklickt wird.
Mein Problem ist: onSubmit handler wird nach dem Senden des Formulars nicht ausgelöst.
Hier ist ein Code, den ich für diesen Zweck erstellt habe:
%Vor% Das handleSubmit wird nicht aufgerufen und das Standardverhalten wird ausgeführt (das Formular wird gesendet).
Ist das ein ReactJs Bug oder ein normales Verhalten?
Gibt es eine Möglichkeit, den onSubmit-Handler aufzurufen, der aufgerufen wird?
Ihr aktuelles onSubmit ist an das Auslösen eines SyntheticEvent gebunden und nicht an das natives Formular senden Ereignis. Das erklärt, warum this.refs.formToSubmit.submit(); Ihren Handler nicht auslöst. Soweit ich weiß, ist der Versuch, dieses SyntheticEvent manuell auszulösen, keine empfehlenswerte oder lohnende Aufgabe.
Ich glaube, der idiomatische Weg, dies zu erreichen, besteht darin, JSX / HTML so zu strukturieren, dass ein <button> oder <input> vom Typ submit verwendet wird. Jede davon löst Ihren handleSubmit -Handler aus. Meiner Meinung nach wird es die Komplexität reduzieren, Ihre Handler konsolidieren und scheint die beste Lösung zu sein.
z.B.
<input type="submit" value="Validate" /> <button type="submit">Validate</button> Ich hatte das gleiche Problem, konnte es aber nicht beheben. Egal was ich getan habe,% document.querySelector('form').submit() würde den onSubmit Handler nicht auslösen. Ich habe versucht, ein unsichtbares <input type="submit"> einzufügen, aber trotzdem .submit() würde es nicht auslösen. Also habe ich mich einfach dazu entschieden, das unsichtbare submit ( style="display:none" ) zu behalten und dann .click() auf dem unsichtbaren Submit-Button zu machen, überraschend funktioniert das sogar mit display:none . Ich habe allerdings nur in Firefox getestet.
Sie sollten nicht erwarten, dass ein Formularreferex für Sie standardmäßig einen zusätzlichen Callback an submit anfügt. Dies wäre ein schlechtes Design des Frameworks beim Arbeiten mit programmgesteuerten Dingen wie dem DOM-Element refs .
Sie sollten die ref verwenden, um alle gewünschten Ereignisse in beliebiger Reihenfolge zu instanziieren, anstatt sich auf eine nicht angegebene interne Implementierung von ref [bei der Instanzierung durch form element] zu verlassen.
Das funktioniert:
%Vor% Actual submit sollte immer zuletzt vorkommen.
Sie sollten das Eingabe-Tag mit dem Typ "submit" anstelle des Anchor-Tags verwenden, da das Anchor-Tag kein Submit-Ereignis auslöst.
%Vor%}