Ich mache mein erstes Projekt mit React und ich habe eine Mauer in der Verwendung des datetime-local-Feldes mit der üblichen React-Logik gefunden.
Für ein gegebenes Eingabefeld würde ich tun, wie in der React-Dokumentation beschrieben.
Das Problem für mich ist, dass das datetime-local-Feld einige nervige Rückgabewerte hat. In zwei Fällen wird eine leere Zeichenfolge zurückgegeben. Ein Fall ist, wenn Sie die integrierte Clear-Taste verwenden und der andere Fall ist, wenn es auf ein ungültiges Datum eingestellt ist - zum Beispiel 29. Februar 2015.
Da dies der Fall ist, kann ich den Wert des Feldes nicht einfach auf den Wert von event.target.value setzen, da dies das Feld jedes Mal zurücksetzen würde, wenn jemand ein ungültiges Datum trifft. Wenn ich sage, dass es nichts tun soll, wenn ein leerer Rückgabewert auftritt, bedeutet das, dass Sie den Clear-Button auf dem Feld nicht mehr verwenden können.
Ich konnte nichts in Bezug auf dieses Problem finden, also hoffe ich, dass jemand hier eine Idee hat, es zu lösen.
Ich habe das jetzt gelöst, indem ich den Wert mit dem Attribut "defaultValue" von JSX anstelle von "value" festlege.
Dies führt dazu, dass das Feld nicht durch die Statusvariable gesperrt wird, was es mir wiederum ermöglicht, eine onChange-Funktion auszuführen, die immer den Status aktualisiert, aber keine Auswirkung auf das Feld selbst hat.
Dadurch verhält sich das Feld wie erwartet und ich kann einfach den Wert übergeben, der gerade in meinem Zustand ist.
Der Nachteil ist, dass ich das Datum nicht validieren kann. Das heißt, wenn jemand versucht, ein ungültiges Datum zu übermitteln, wird es nur als Null in der Datenbank gespeichert.
Wenn jemand eine elegantere Lösung vorschlägt, würde ich mich freuen, das zu hören.
Da es sich um eine kontrollierte Komponente handelt, müssen Sie einen Zustandswert festlegen, von dem gelesen werden soll. Ich setze die aktuelle Datetime im Zustand wie folgt ...
%Vor%und mein handleChange ist für andere Texteingaben wie folgt wiederverwendbar:
%Vor%Tags und Links javascript html5 reactjs