Javascript 如何从键盘编辑时间选择器的值？

我有一个

材质ui时间选择器

，我想控制这个输入，它工作得很好，但我想编辑键盘上的时间输入，而不是在我点击时钟上的输入时

我的代码是：

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

import React，{Component}来自“React”；
从“物料ui时间选择器”导入{TimePicker}；
从“@material ui/core”导入{Input as Time，Dialog as Clock}；
openDialog=（）=>this.setState（{isOpen:true}）；
closeDialog=（）=>this.setState（{isOpen:false}）；
handleDialogTimeChange=newValue=>{
常数小时=新值
.getHours（）
.toString（）
.padStart（2，“0”）；
const minutes=newValue
.getMinutes（）
.toString（）
.padStart（2，“0”）；
常量文本值=小时+“：”+分钟；
this.setState（{time:textValue}）；
};
handleKeyboardTimeChange=time=>this.setState（{time}）；
createDateFromTextValue=值=>{
const splitParts=value.split（“：”）；
返回新日期（1970年1月1日，拆分部分[0]，拆分部分[1]）；
};
render（）{
返回(
我已经将你的沙箱分叉，并做了一些调整。虽然我还没有修复它，但我会告诉你当前的错误


我修改了两行

在您的构造函数中，我添加了

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

和您的handleKeyboardTimeChange：

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

这只是将状态设置为从那里看到的传入的精确值。没有额外的验证。
我看不到上面任何可运行的内容link@KOTIOS你能检查一下吗？请在这里添加代码，因为链接在浏览器上看起来是空的output@Ivanofuganda查看我的帖子，我添加了代码干预：谢谢@Caleb，我怎样才能更改时钟的颜色呢？有点像一个移动的目标。我确信有一种更好的方法，使用react组件将其包装在一个withStyles属性中，并在编译时注入样式。但是
div[class^=“clock circle”]{background:#f00；}
这行CSS就可以了。如果我正确理解我自己的代码，它只会找到任何以
时钟圈开始的类，并应用背景色。因此，如果您有多个这样的类，并且您不希望它们都是相同的颜色，这将不适用。谢谢，您能帮助我吗？