尝试通过点击 react-datepicker 组件的图标打开 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 文档链接尝试过，但没有运气。
只需用标签包装 DatePicker。里面的所有点击标签调用焦点输入，即打开日历。
<label>
<DatePicker/>
</label>
如果您想以编程方式打开日期选择器，或者您只是不想使用<label>包装器，您可以设置日期选择器组件的引用并用于setOpen(bool)打开它。请注意，由于我们使用的是 refs，因此组件应该是有状态的。
例子：
openDatepicker = () => this._calendar.setOpen(true);
render() {
<Datepicker
{...datepickerProps}
ref={(c) => this._calendar = c} />
<img src={iconImg} onClick={this.openDatepicker} />
}
当前日期选择器的 Github 上有一个未解决的问题，指出文档中缺少此问题。
我刚刚就这样完成了，
svg 图标已被 webpack 导入
import IconCalendar from 'IconCalendar';
主组件中的渲染函数
render() {
const {reportSettings: {
dateTo
}} = this.props;
return (
<div id="date-picker">
<Label for="date-picker-1">Select Results date</Label>
<DatePicker todayButton={"Today"} dateFormat={Constants.DATE_FORMAT} customInput={(<ExampleCustomInput/>)} selected={dateTo} onChange={this.handleChange}/>
</div>
);
}
呈现输入字段和图标的辅助组件
class ExampleCustomInput extends Component {
static propTypes = {
onClick: PropTypes.func,
value: PropTypes.string
}
render() {
const {value, onClick} = this.props;
return (
<div className="form-group">
<input type="text" className="form-control" value={value} onClick={onClick}/>
<IconCalendar className="date-picker-icon" onClick={onClick}></IconCalendar>
</div>
);
}
}
最后 css 帮助我在输入字段上显示图标
.date-picker-icon {
float: right;
margin-right: 6px;
margin-top: -30px;
position: relative;
z-index: 2;
}
在添加了较新版本的 react-datepicker ie 0.30.0 后，我获得了props自动对焦，但是，我再次遇到了仅第一次有效的问题，然后我尝试使用如下所示的 ref
refs='startDate'
在日期选择器中然后在这个对象中我得到了
this.refs.startDate.deferFocusInput();
所以我打电话给它，我点击图标打开了日期选择器