Как правильно использовать элемент ввода времени?

Question

У меня есть среагировать компонент, который визуализирует следующий HTML:

 <input 
      type="time" 
      step="1" 
      value={this.state.time} 
      className="form-control" 
      placeholder="Time" 
      onChange={(ev) => {this.setState({time:ev.target.value})} 
     /> 

Этот «вид» работает, но проблема в том, что я не могу ввести двойные числа цифр в поле ввода. Скажем, я хочу ввести 00:23:00. Я начинаю с полем времени, который выглядит следующим образом:

00:00:00

рядом я щелкаю мышью на средних парах нулей. Я нажимаю «2» на клавиатуре. Теперь это будет выглядеть следующим образом:

00:02:00

Однако, когда я типа «3» (независимо от того, насколько быстро я это сделать), что происходит, моя ценность выглядит следующим образом:

00:03:00

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

00:23:00

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

Я думаю, что setState запускает ретранслятор компонента, заставляя его вести себя странно.

Любые идеи о том, как исправить это?

Answer 1

Исправлено. Я преобразовал строку 00:00:00 (или любое другое значение, которое он отправил обратно в код) в целое число, представляющее метку времени. В атрибуте value я преобразовал это целое обратно в представление 00:00:00. Это, похоже, породило описанное мной поведение. Если я просто храню строку как есть, все работает так, как ожидалось.

Answer 2

Я проверил ваш код в jsbin, но не могу воспроизвести вашу проблему.

Demo здесь: http://jsbin.com/vujixe/edit?html,js,output

Вы можете проверить его.

Кстати, если вы хотите установить начальное значение в своем поле, то метод commendatory равен getInitState, точно так же как мой код в jsbin. Во-вторых, setState вызывает триггер компонента.