Wert von datetime-local mit React

Question

Ich mache mein erstes Projekt mit React und ich habe eine Wand in der Verwendung des datetime-lokalen Feldes mit der üblichen React-Logik getroffen.

Für irgendein gegebenes Eingabefeld würde ich wie in der React documentation angewiesen tun.

Das Problem für mich ist, dass das datetime-lokale Feld einige nervige Rückgabewerte hat. Es gibt eine leere Zeichenfolge in zwei Fällen zurück. 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 nicht einfach den Wert der Das Feld entspricht dem Wert von event.target.value, da das Feld jedes Mal zurückgesetzt wird, wenn ein ungültiges Datum angezeigt wird. 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.

Answer 1

Ich habe dies jetzt gelöst, indem ich den Wert mit dem JSX Attribut "defaultValue" anstelle von "value" festlege.

Dies führt dazu, dass das Feld nicht durch die Statusvariable gesperrt wird, was wiederum eine OnChange-Funktion ermöglicht, die immer den Status aktualisiert, aber keine Auswirkungen auf das Feld selbst hat.

Dadurch verhält sich das Feld wie erwartet und ich kann nur den Wert übergeben, der gerade in meinem Zustand ist.

Der Nachteil bei der Lösung 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 mit einer eleganteren Lösung kommt, würde ich mich freuen, es zu hören.

Answer 2

<input 
    type="datetime-local" 
    value={this.state.datetime} 
    onChange={e => this.handleChange('datetime', e)} 
    /> 

Da es sich um eine kontrollierte Komponente handelt, müssen Sie einen Statuswert festlegen, von dem gelesen werden soll. Ich habe die aktuelle Datetime im Zustand wie so ...

state = { 
     datetime: `${new Date().getFullYear()}-${`${new Date().getMonth() + 
     1}`.padStart(2, 0)}-${`${new Date().getDay() + 1}`.padStart(
     2, 
     0 
    )}T${`${new Date().getHours()}`.padStart(
     2, 
     0 
    )}:${`${new Date().getMinutes()}`.padStart(2, 0)}` 
    }; 

und meine handleChange ist reuable für andere Texteingaben wie folgt:

handleChange = (field, e) => { 
    this.setState({ [field]: e.target.value }); 
    };