SingleDatePicker
实例在我的Redux Form组件中显示日期,但不会触发并在单击时打开日历。
构造函数
constructor(props) {
super(props);
this.state = {
showCover: true,
coverPreview: null,
date: moment(),
calendarFocused: false
};
this.handleShowCoverChange = this.handleShowCoverChange.bind(this);
this.handleCoverPreview = this.handleCoverPreview.bind(this);
this.renderField = this.renderField.bind(this);
this.fileField = this.fileField.bind(this);
this.renderSingleDatePicker = this.renderSingleDatePicker.bind(this);
this.onDateChange = this.onDateChange.bind(this);
this.onFocusChange = this.onFocusChange.bind(this);
}
用于更改日期和焦点的SingleDatePicker
方法
onDateChange(date) {
if (date) {
this.setState({ date });
}
}
onFocusChange({ focused }) {
this.setState({ calendarFocused: focused });
};
这是SingleDatePicker
渲染方法
renderSingleDatePicker() {
return <SingleDatePicker
date={this.props.book ? moment(this.props.book.publishedAt) : moment()}
onDateChange={this.onDateChange}
focused={this.state.calendarFocused}
onFocusChange={this.onFocusChange}
numberOfMonths={1}
isOutsideRange={() => false}
id='add_book_form'
displayFormat='MM.DD.YYYY'
/>
}
这是Field
,利用SingledatePicker
<Field
className='form-control'
name='releasedAt'
type='text'
component={this.renderSingleDatePicker}
label='Released At'
warn={[notEarlier1800]}
comment='Please provide a release date as YYYY-MM-DD. Optional'
/>
我想念什么?完整的Redux表单组件位于https://gist.github.com/ElAnonimo/6656c5b15cad5edc409ca078663c616a
上