Как я могу изменить значение таймера с клавиатуры? - PullRequest
Новая
       23

Как я могу изменить значение таймера с клавиатуры?

1 голос
/ 24 апреля 2019

У меня есть material-ui-time-picker, и я хочу управлять этим вводом, он работает хорошо, но я хочу редактировать ввод времени с клавиатуры, а не когда я нажимаю на ввод на часах.

Мойкод: 

import React, { Component } from "react";
import { TimePicker } from "material-ui-time-picker";
import { Input as Time, Dialog as Clock } from "@material-ui/core";

openDialog = () => this.setState({ isOpen: true });
  closeDialog = () => this.setState({ isOpen: false });
  handleDialogTimeChange = newValue => {
    const hours = newValue
      .getHours()
      .toString()
      .padStart(2, "0");
    const minutes = newValue
      .getMinutes()
      .toString()
      .padStart(2, "0");
    const textValue = hours + ":" + minutes;
    this.setState({ time: textValue });
  };
  handleKeyboardTimeChange = time => this.setState({ time });
  createDateFromTextValue = value => {
    const splitParts = value.split(":");
    return new Date(1970, 1, 1, splitParts[0], splitParts[1]);
  };
render() {

    return (

      <div>
        <Time
          value={this.state.time}
          onChange={this.handleKeyboardTimeChange}
          endAdornment={
            <InputAdornment position="end">
              <IconButton onClick={this.openDialog}>
                <AccessTime />
              </IconButton>
            </InputAdornment>
          }
          //}
        />
        <Clock maxWidth="xs" open={this.state.isOpen}>
          <TimePicker
            mode="24h"
            value={this.createDateFromTextValue(this.state.time)}
            onChange={this.handleDialogTimeChange}
            autoOk={true}
            cancelLabel=""
            okLabel=""
            placeholder=""
            disableUnderline={true}
          />
        </Clock>
      </div>
    );
  }

Моя песочница: https://codesandbox.io/s/vm9wm19p27

Когда я запускаю его, я получаю этот ввод, но когда я редактирую его значение, ввод исчезнет.

Как я могу это исправить?

1 Ответ

1 голос
/ 24 апреля 2019

Я раздвоил твою песочницу и сделал пару настроек.Хотя я не исправил это - я просто покажу вам, что в данный момент не так.

https://codesandbox.io/s/j24rqql9n9

Я изменил две строки
В вашем конструкторе я добавил 

this.handleKeyboardTimeChange = this.handleKeyboardTimeChange.bind(this)

И ваш handleKeyboardTimeChange: 

handleKeyboardTimeChange(event) {
  this.setState({ time: event.target.value });
}

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

...