Valore di datetime-local con React

Question

Sto facendo il mio primo progetto con React e ho colpito un muro su come utilizzare il campo datetime-local usando la solita logica React.

Per ogni campo di input specificato farei come indicato nello React documentation.

Il problema per me è che il campo datetime-local ha alcuni valori di ritorno fastidiosi. Restituisce una stringa vuota in due casi. Un caso è quando si utilizza il pulsante di cancellazione incorporato e l'altro caso è impostato su una data non valida, ad esempio il 29 febbraio 2015.

Dato che questo è il caso, non posso semplicemente impostare il valore del campo uguale al valore di event.target.value, poiché ciò ripristinerebbe il campo ogni volta che qualcuno colpisce una data non valida. Se gli dico di non fare nulla quando si incontra un valore di ritorno vuoto significa che non è più possibile usare il pulsante di cancellazione sul campo.

Non sono riuscito a trovare nulla relativo a questo problema, quindi spero che qualcuno qui dentro abbia un'idea per risolverlo.

Answer 1

Per ora ho risolto questo problema impostando il valore utilizzando l'attributo "defaultValue" JSX anziché "valore".

Ciò comporta che il campo non viene bloccato dalla variabile di stato che a sua volta consente di creare una funzione onChange che aggiorna sempre lo stato ma non ha alcun effetto sul campo stesso.

Così facendo il campo si comporta come previsto e posso solo inviare qualsiasi valore è attualmente nel mio stato.

L'inconveniente di risolverlo in questo modo è che non sono in grado di convalidare la data. Il che significa che se qualcuno tenta di inviare una data non valida verrà semplicemente memorizzato come null nel database.

Se qualcuno si presenta con una soluzione più elegante sarei lieto di sentirlo.

Answer 2

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

Fin dalla sua una componente controllato è necessario impostare un valore di stato da cui leggere. Ho impostato il datetime corrente in stato in questo modo ...

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)}` 
    }; 

e la mia handleChange è reuable per gli altri ingressi di testo in questo modo:

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