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（）{
返回(
他们的中提供了一个解决方案组件。请检查此项，这是物料ui中已知的问题，已被接受为解决方案。这是在链接过时时提供的解决方案：

'use strict';
import React, {Component} from 'react';
import {DatePicker, IconButton, TextField} from "material-ui";
import ActionDateRange from 'material-ui/svg-icons/action/date-range';
import format from 'date-fns/format'
import parse from 'date-fns/parse'

export default class DatePickerField extends Component{

   constructor(props){
      super(props);

      this.state = {
        selectedDate: new Date(),
        dateText: format(new Date(), 'MM/DD/YYYY')
      };
   }

   handleChangeDatePicker = (event, date) => {
      this.setState({selectedDate: date, dateText:format(date, 'MM/DD/YYYY')});
   };

   handleDateInputChange = (event, value) => {
      this.setState({dateText:value});
   };

   handleDateInputBlur = (value) => {
     let parsedDate = parse(value, 'MM/DD/YYYY');

     if(this.isADate(parsedDate)){
        this.setState({selectedDate:parsedDate});
     }
     else{
        this.setState({dateText:format(this.state.selectedDate, 'MM/DD/YYYY')});
     }
   };

   isADate = (maybeDate) => {
      if ( Object.prototype.toString.call(maybeDate) === "[object Date]" ) {
         if ( isNaN( maybeDate.getTime() ) ) {
            return false;
         }
         else {
            return true;
         }
      }
      else {
         return false;
      }
   };

   render(){

      let dateInputWidth = "150px";
      let datePickerMargin = "-185px";

      return (
         <div style={{display: "flex"}}>
            <TextField
               style={{width:dateInputWidth}}
               value={this.state.dateText}
               onChange={this.handleDateInputChange}
               onBlur={(event) => this.handleDateInputBlur(event.currentTarget.value)}
            />

            <IconButton style={{opacity:"0.65"}}
                        onClick={() => this.datePicker.focus()}>
               <ActionDateRange />
            </IconButton>

            <div style={{width:"0px", height:"0px", marginLeft:datePickerMargin}}>
               <DatePicker
                  id="dataPicker"
                  floatingLabelText={''}
                  value={this.state.selectedDate}
                  errorText={''}
                  disabled={false}
                  formatDate={date => { return format(date, 'MM/DD/YYYY') } }
                  autoOk
                  container="inline"
                  fullWidth
                  onChange={this.handleChangeDatePicker}
                  ref={c => {
                     this.datePicker = c
                  }}
               />
            </div>
         </div>
      )
   }

}

在您的
/MyAwesomeReactComponent.js
（即您希望使用的组件）中：

从“React”导入React；
从“物料界面/RaisedButton”导入RaisedButton；
常量MyAwesomeReactComponent=（）=>(
);
导出默认MyAwesomeReactComponent；

请参考他们的详细信息。
我认为
TimeInput
组件不允许这样做，但您可以编写自己的组件来创建所需的确切行为。而不是从包中导入
TimeInput
导入
{TimePicker}
，并创建自定义组件

这绝非易事，但它将为您提供继续下去的基础。
工作示例：

import React，{useState}来自“React”；
从“@material ui/core”导入{按钮、输入、输入设置、图标按钮、对话框、对话框操作}；
从“物料ui时间选择器”导入{TimePicker}；
从“@material ui/icons/AccessTime”导入AccessTime；
函数CustomDatePicker（）{
常量[isOpen，setIsOpen]=useState（false）；
const[value，setValue]=useState（'10:10'）；
const openDialog=（）=>setIsOpen（true）；
const closeDialog=（）=>setIsOpen（false）；
const handleDialogTimeChange=（newValue）=>{
const hours=newValue.getHours（）.toString（）.padStart（2，“0”）；
const minutes=newValue.getMinutes（）.toString（）.padStart（2，“0”）
const textValue=小时+'：'+分钟；
设置值（textValue）；
}
constHandleKeyboardTimeChange=（事件）=>setValue（event.target.value）；
const createDateFromTextValue=value=>{
const splitParts=value.split（“：”）；
返回新日期（1970年1月1日，拆分部分[0]，拆分部分[1]）；
}
返回(
取消
好啊
)
}
导出默认CustomDatePicker
看看这个例子：


您可以将示例中的按钮替换为带有图标的
TextField
，并且仅当您单击图标打开a而不是
TimeInput
时，或者您可以使用软件包的

材质ui选取器演示：
您有两个选项可以执行此操作：

使用

使用

提供链接中的代码以防链接过时。感谢@Erik a的建议当我运行它时，我得到：
无法读取未定义的属性“prepareStyles”
，您可以在我的沙箱中检查它：请检查我的答案，我已编辑以包括您问题的可能来源和解决方案。我尝试了，我得到了
尝试pted import'makeStyles'
我得到了第二个选项！我尝试了，但是当我点击时钟时，对话框会显示输入值，当我点击它时，会显示时间选择器，你能在我的sanbox上检查它吗？是的，因为你使用了
TimeInput
而不是
timepicker
有什么要检查的吗当我查看它时，它会运行。对话框不会关闭，但这是因为没有代码更新
isOpen
变量以关闭它。而完整输入消失的原因是它抛出了一个错误。始终在控制台打开的情况下进行编码。它试图拆分无效值。我尝试输入有效值，但输入消失了，因为它会引发错误。在
handleKeyboardTimeChange
函数中，您正在存储事件对象（您称之为时间..）随着时间的推移。这不能像字符串一样拆分，因为它不是字符串。请尝试学习如何使用浏览器的开发人员工具，控制台中的错误会为找出错误所在提供很多指导。
 import React from 'react';
 import ReactDOM from 'react-dom';
 import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
 import MyAwesomeReactComponent from './MyAwesomeReactComponent';

 const App = () => (
   <MuiThemeProvider>
     <MyAwesomeReactComponent />
   </MuiThemeProvider>
 );

 ReactDOM.render(
   <App />,
   document.getElementById('app')
 );

import React from 'react';
import RaisedButton from 'material-ui/RaisedButton';

const MyAwesomeReactComponent = () => (
    <RaisedButton label="Default" />
);

export default MyAwesomeReactComponent;

import React, { useState } from "react";
import { Button, Input, InputAdornment, IconButton, Dialog, DialogActions } from '@material-ui/core';
import { TimePicker } from 'material-ui-time-picker';
import AccessTime from '@material-ui/icons/AccessTime';

function CustomDatePicker() {
  const [isOpen, setIsOpen] = useState(false);
  const [value, setValue] = useState('10:10');

  const openDialog = () => setIsOpen(true);
  const closeDialog = () => setIsOpen(false);

  const handleDialogTimeChange = (newValue) => {
    const hours = newValue.getHours().toString().padStart(2, "0");
    const minutes = newValue.getMinutes().toString().padStart(2, "0")
    const textValue = hours + ':' + minutes;
    setValue(textValue);
  }
  const handleKeyboardTimeChange = (event) => setValue(event.target.value);

  const createDateFromTextValue = value => {
    const splitParts = value.split(':');
    return new Date(1970, 1, 1, splitParts[0], splitParts[1]);
  }

  return (
    <div>
      <Input
        value={value}
        onChange={handleKeyboardTimeChange}
        endAdornment={
        <InputAdornment position="end">
          <IconButton onClick={openDialog}>
            <AccessTime />
          </IconButton>
        </InputAdornment>
      }
      />
      <Dialog maxWidth='xs' open={isOpen}>
        <TimePicker mode='24h' value={createDateFromTextValue(value)} onChange={handleDialogTimeChange} />
        <DialogActions>
        <Button onClick={closeDialog} color='primary'>
          Cancel
        </Button>
        <Button onClick={closeDialog} color='primary'>
          Ok
        </Button>
        </DialogActions>
      </Dialog>
    </div>
  )
}

export default CustomDatePicker