单击Redux表单时,SingleDatePicker无法打开

时间:2019-01-08 16:23:16

标签: react-dates

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

0 个答案:

没有答案