使用自定义按钮打开 DatePicker 或 DatePickerDialog答案

【问题标题】：Open DatePicker or DatePickerDialog using custom button使用自定义按钮打开 DatePicker 或 DatePickerDialog
【发布时间】：2016-04-14 16:00:59
【问题描述】：

除了使用 DatePicker 开箱即用的内置 input 之外，还有什么方法可以触发 DatePickerDialog 以使用外部控件/按钮打开？

我们正在使用material-ui 库。

【问题讨论】：

标签： reactjs material-ui

【解决方案1】：

由于对话框open 状态由material-ui 组件在内部处理，唯一的方法是在DatePicker 中使用ref 并调用focus()。有点像黑客 - 但它有效..

例子：

<DatePicker
    ref='datePickerStartDate'
    errorStyle={componentSyles.error}
    textFieldStyle={componentSyles.textField}
    DateTimeFormat={Intl.DateTimeFormat}
    cancelLabel={cancelLabel}
    autoOk={true}
    {...this.props}
     />

<FontIcon
    onClick={(e) => { this.refs.datePickerStartDate.focus() }}
    className="material-icons" style={componentSyles.icon}>
    date_range
</FontIcon>

【讨论】：

嘿，这很好用，谢谢。一个问题：我们在一个动态创建的项目列表中使用它，每个项目都有一个日期选择器，并且数组索引的上下文始终设置为数组中的最后一项，但是当我们将它用作输入时，它可以工作美好的。任何如何传递正确的索引？
您是否尝试将索引绑定到该函数？如果是这样，你能提供一些代码吗？
仅供参考 - 这不再适用于 React 16+