我有一个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
当我运行它时,我得到了这个输入,但是当我编辑它的值时,输入将消失。
我该如何解决?
我已经分叉你的沙箱并进行了一些调整。虽然我没有修复它 - 我只会告诉你目前的错误。
https://codesandbox.io/s/j24rqql9n9
我修改了两行 在你的构造函数中,我补充说
this.handleKeyboardTimeChange = this.handleKeyboardTimeChange.bind(this)
你的handleKeyboardTimeChange:
handleKeyboardTimeChange(event) {
this.setState({ time: event.target.value });
}
这只是将状态设置为从您在那里看到的精确值。没有额外的验证。