React DatePicker如何在点击图标时打开datepicker

Question

尝试打开datepicker点击react-datepicker组件的图标,我已经完成了他们的文档和问题链接,但发现它没有多大用处.

<DatePicker
        {...startDateOpts}
        id='abc'
        maxDate={moment()}
        onChange={this.handleStartChange}
        placeholderText='Start Date'
        popoverAttachment={smallScreen ? 'bottom center' : undefined}
        popoverTargetAttachment={smallScreen ? 'top center' : undefined}
        popoverTargetOffset={smallScreen ? '0px 0px' : undefined}
      />

我尝试从React-datepicker docs链接但没有运气.

Answer 1

只需使用标签包装DatePicker.所有点击内部标签调用都集中在输入,即打开日历.

<label>
    <DatePicker/>
</label>

Answer 2

如果您想以编程方式打开日期选择器，或者您只是不想使用<label>包装器，您可以设置日期选择器组件的引用并用于setOpen(bool)打开它。请注意，由于我们使用的是 refs，因此组件应该是有状态的。

例子：

openDatepicker = () => this._calendar.setOpen(true);


render() {
    <Datepicker
        {...datepickerProps}
        ref={(c) => this._calendar = c} />

    <img src={iconImg} onClick={this.openDatepicker} />
}

当前日期选择器的 Github 上有一个未解决的问题，指出文档中缺少此问题。

Answer 3

添加新版本的react-datepicker ie 0.30.0后，我得到了道具自动对焦，但是，我再次遇到了仅第一次有效的问题，然后我尝试使用如下所示的ref

refs='startDate'

在 datepicker 中然后在这个对象中我得到了

this.refs.startDate.deferFocusInput();

所以我调用了它，然后单击图标打开了日期选择器