0
我最近升級到redux-form v6，並且我的material-ui自定義日期時間選擇器停止工作。下面是它看起來像現在：DateTimePicker Redux窗體字段問題
class DateTimePicker extends React.Component {
handleDateChanged(e, value) {
let currentTime;
if (this.props.dateField.value) {
let currentValue = moment(this.props.dateField.value);
currentTime = currentValue.subtract(currentValue.clone().startOf('day'));
}
let newValue = moment(value).startOf('day').add(currentTime || 0);
this.props.dateField.onChange(newValue.toDate()); //this.refs.timePicker goes undefined when this line runs.
this.refs.timePicker.openDialog();
}
handleTimeChanged(e, value) {
return this.props.dateField.onChange(value); //This is called, but the value does not change.
}
formatDate(value) {
return moment.tz(value, this.props.timezone).format('M/D/YY HH:mm zz');
}
render() {
return (
<span>
<DatePicker
value={this.props.dateField.value || null}
autoOk={true}
maxDate={new Date()}
floatingLabelText="Change At"
floatingLabelStyle={{pointerEvents: 'none'}}
errorText={this.props.dateField.touched && this.props.dateField.error}
formatDate={this.formatDate.bind(this)}
onChange={this.handleDateChanged.bind(this)}
/>
<TimePicker
style={{display: 'none'}}
value={this.props.dateField.value || null}
format="24hr"
hintText="Time"
ref="timePicker"
onChange={this.handleTimeChanged.bind(this)}
/>
</span>
);
}
}
而且它的形式使用，像這樣：
<Field
name="changeAt"
component={({input}) => {
return <DateTimePicker dateField={input} timezone={this.props.driver.homeTerminal.timezone} />
}}
/>
。
第一個問題：當我選擇一天時，handleDateChanged被稱爲預期。當方法開始時，this.refs.timePicker按預期引用時間選擇器。但是，執行上面的行時（this.props.dateField.onChange(newValue.toDate())），則引用將丟失，並且this.refs.timePicker將更改爲undefined。
每個後續時間我選擇一個日期，refs不會丟失，並且它可以正常工作。
第二個問題：當我選擇一個時間時，handleTimeChanged被調用，其中調用this.props.dateField.onChange(value)具有正確的值;但是價值沒有改變。
任何建議表示讚賞。