Значение datetime-local с React

Question

Я делаю свой первый проект с React, и я ударил стену, как использовать локальное поле datetime, используя обычную логику React.

Для любого заданного поля ввода я сделал бы так, как указано в React documentation.

Проблема для меня в том, что поле datetime-local имеет некоторые досадные возвращаемые значения. Он возвращает пустую строку в двух случаях. Один случай - когда вы используете встроенную кнопку очистки, а другой - когда установлена ​​недопустимая дата - например, 29 февраля 2015 года.

Поскольку это так, я не могу просто установить значение поле равно значению значения event.target.value, так как это приведет к сбросу поля каждый раз, когда кто-то ударит по недействительной дате. Если я скажу ему ничего не делать, когда сталкивается с пустым возвращаемым значением, это означает, что вы больше не можете использовать кнопку очистки в поле.

Мне не удалось найти что-либо, связанное с этой проблемой, поэтому я надеюсь, что у кого-то есть идея решить эту проблему.

Answer 1

Я решил это на данный момент, установив значение, используя атрибут JSX «defaultValue» вместо «value».

Это приводит к тому, что поле не блокируется переменной состояния, что в свою очередь позволяет мне сделать функцию onChange, которая всегда обновляет состояние, но не оказывает никакого влияния на само поле.

Таким образом, поле ведет себя так, как ожидалось, и я могу просто отправить любое значение, находящееся в моем состоянии.

Недостатком этого решения является то, что я не могу подтвердить дату. Это означает, что если кто-то попытается отправить недействительную дату, он будет просто сохранен как null в базе данных.

Если кто-нибудь придумает более элегантное решение, я был бы рад его услышать.

Answer 2

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

С его управляемого компонента вы должны установить значение состояния для чтения. I установить текущее DateTime в состоянии как так ...

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

и мой handleChange представляет reuable других текстовых входов как так:

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