我正在尝试在我的React应用中使用此时间戳:http://timepicker.co/。我已经编写了一个简单的类,并将当前时间传递给它,无论它在外部更改了组件。
看起来像这样:
import React, { Component } from 'react';
import jQuery from 'jquery';
require('../../../node_modules/jquery-timepicker/jquery.timepicker.js');
export default class TimePicker extends Component {
constructor(props) {
super(props);
this.state = {
minTime: props.minTime || '6',
maxTime: props.maxTime || '23',
interval: props.interval || 15,
defaultTime: props.defaultTime || '10',
startTime: props.startTime || '6',
};
this.timepicker = {};
this.onChange = this.onChange.bind(this);
}
onChange(value) {
this.setState({
value,
}, () => {
const { onChange } = this.props;
if (typeof onChange === 'function') {
this.props.onChange(value);
}
});
}
componentDidUpdate() {
const {
minTime,
maxTime,
interval,
defaultTime,
startTime,
} = this.state;
jQuery(this.timepicker).timepicker({
timeFormat: 'HH:mm',
interval,
minTime,
maxTime,
defaultTime,
startTime,
dynamic: true,
dropdown: true,
scrollbar: true,
change: (value) => {
this.onChange(value);
},
});
}
componentWillReceiveProps(nextProps) {
this.setState({
defaultTime: nextProps.defaultTime,
});
}
componentDidMount() {
const {
minTime,
maxTime,
interval,
defaultTime,
startTime,
} = this.state;
jQuery(this.timepicker).timepicker({
timeFormat: 'HH:mm',
interval,
minTime,
maxTime,
defaultTime,
startTime,
dynamic: true,
dropdown: true,
scrollbar: true,
change: (value) => {
this.onChange(value);
},
});
}
render() {
return (
<input
className="timepicker"
ref={(timepicker) => { this.timepicker = timepicker; }}
/>
);
}
}
TimePicker.propTypes = {
minTime: React.PropTypes.string,
maxTime: React.PropTypes.string,
interval: React.PropTypes.number,
defaultTime: React.PropTypes.string,
startTime: React.PropTypes.string,
onChange: React.PropTypes.func,
};
首次登录时,当前时间已设置,但是当我通过新时间并尝试setState
componentWillReceiveProps
时,时间将不会更新。
我错过了什么?
答案 0 :(得分:0)
defaultTime用于设置初始时间,但不用于更改现有选择器中的时间。
对于更改时间,请使用以下代码(在componentDidUpdate中)
jQuery(this.timepicker).timepicker({'setTime', TIME);