在 Material UI 库中以编程方式打开 date/time 选择器

Question

我正在做一个使用 React 和 Material Design 的项目。我想使用 Material UI，因为我需要花哨的数据和时间选择器，这个库作为组件提供。

因为我必须在应用程序的特定步骤中设置开始和结束时间以及日期，所以我想从一个选择器“跳”到下一个选择器以减少用户必须进行的点击, 即

点击“开始日期”输入字段
选择器打开，日期被选中
关闭第一个选择器应该打开下一个选择器（开始时间）
关闭它会打开下一个选择器（结束日期）
关闭它会打开下一个选择器（结束时间）

我知道如何在这些事件上触发函数，但我不知道如何以编程方式打开选择器。

尝试在相应元素上使用 jQuery(...).click() 或 .focus() 的“肮脏技巧”，但没有奏效。

Answer 1

我解决了这个问题，为每个 datepicker

添加 ref

handleChangeDPOne(){
  this.refs.datePickerTwo.openDialog()
}

handleChangeDPTwo(){
  // something
}

render(){
  return (
    <div>
      <DatePicker ref='datePickerOne' onChange={this.handleChangeDPOne} />
      <DatePicker ref='datePickerTwo' onChange={this.handleChangeDPTwo} />
    </div>
  )
}

希望对您有所帮助。

在 Material UI 库中以编程方式打开 date/time 选择器

Opening date/time picker programatically in Material UI library

reactjs

material-ui