Wartość datetime-local z React

Question

Robię mój pierwszy projekt z React i uderzyłem w ścianę, jak używać pola datetime-local przy użyciu zwykłej logiki React.

Dla dowolnego pola wejściowego postępowałbym zgodnie z instrukcją w React documentation.

Problem polega na tym, że pole datetime-local ma pewne denerwujące wartości zwracane. Zwraca pusty ciąg w dwóch przypadkach. Jeden przypadek występuje, gdy używasz wbudowanego przycisku kasowania, a drugi przypadek jest ustawiony, gdy jest ustawiony na niepoprawną datę - na przykład 29 lutego 2015.

Ponieważ tak jest, nie mogę po prostu ustawić wartości pole równe wartości event.target.value, ponieważ spowoduje to zresetowanie pola za każdym razem, gdy ktoś znajdzie nieprawidłową datę. Poinformuję go, że nic nie robię, gdy napotykamy pustą wartość zwracaną, co oznacza, że ​​nie można już używać przycisku kasowania na polu.

Nie znalazłem nic powiązanego z tym problemem, więc mam nadzieję, że ktoś tutaj ma pomysł na rozwiązanie.

Answer 1

Rozwiązałem to na razie, ustawiając wartość za pomocą atrybutu "defaultValue" JSX zamiast "value".

Powoduje to, że pole nie jest zablokowane przez zmienną stanu, co z kolei umożliwia mi wykonanie funkcji zmiany wartości, która zawsze aktualizuje stan, ale nie ma wpływu na samo pole.

W ten sposób pole zachowuje się zgodnie z oczekiwaniami i mogę przesłać dowolną wartość w moim stanie.

Wadą rozwiązania tego problemu jest to, że nie jestem w stanie potwierdzić daty. Oznacza to, że jeśli ktoś spróbuje przesłać nieprawidłową datę, będzie przechowywany jako null w bazie danych.

Jeśli ktoś wymyśli bardziej eleganckie rozwiązanie, chętnie go wysłucham.

Answer 2

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

Ponieważ jest to składnik kontrolowany, należy ustawić wartość stanu do odczytania. I ustawić bieżącą datetime w stanie tak jak ...

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

i mój handleChange jest reuable dla innych wejść tekstowych tak:

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