Material ui 如何从平面或凸起的按钮元素触发材质UI日期选择器元素

我试图从一个凸起的按钮打开日期选择器对话框，该按钮位于工具栏元素中，没有任何乐趣

在查阅了文档之后，我没有找到解决方案。我试着将日期选择器放在平面按钮内，如下所示：

<RaisedButton label="Start Date" onTouchTap={this.handleRaisedButtonTap} primary={true}>
   <DatePicker autoOk={true} formatDate={this.datePickerFormat} hintText='Start Date' label='Start Date' value={this.state.filter.startDate.display} />
</RaisedButton>

我想在单击按钮时打开日期选择器对话框

---

对于onTouchTap事件的任何帮助都将不胜感激，您可以直接将组件从ReactDOM渲染到容器元素（通常是div）中，从而：

//在触摸屏上
handleRaisedButtonTap（）{
ReactDOM.render（，
getElementById（'div datepicker'）；
}

---

它仍然只是一个React组件，您仍然可以在它们上使用React API:）

您必须从DatePicker组件的引用打开它

openDatePicker(){
  this.refs.dp.openDialog()
}

render(){
  return (
    <div>
      <RaisedButton onTouchTap={this.openDatePicker} label='open date picker' />
      <DatePicker ref='dp' />
    </div>
  )
}

openDatePicker（）{
this.refs.dp.openDialog（）
}
render（）{
返回(
)
}

使用useState单击按钮打开物料UI日期选择器

下面的示例：

import { MuiPickersUtilsProvider, DatePicker } from "@material-ui/pickers";
const [selectedDate, setSelectedDate] = React.useState(new Date());
const [open, setOpen] = useState(false);

<MuiPickersUtilsProvider utils={DateFnsUtils}>
  <button onClick={() => setOpen(isOpen => !isOpen)}>Open Picker</button
  <DatePicker onChange={()=> handleDateChange()} open={open} />
</MuiPickersUtilsProvider>

从“@material ui/pickers”导入{MuiPickersUtilsProvider，DatePicker}；
const[selectedDate，setSelectedDate]=React.useState（新日期（））；
const[open，setOpen]=useState（false）；
setOpen（等参=>！等参）}>Open选择器

这会呈现一个输入，单击该输入会打开日期选择器。我猜他希望在单击按钮时打开DatePicker对话框。我必须绑定上下文，使其像onTouchTap={this.openDatePicker.bind（this）}@WannyMiarelli这样工作。如果现在使用ES6语法，可以执行类似于

openDatePicker=（）=>{…}

的操作来避免绑定，由于匿名函数使用其“周围”

此上下文，而不是重新定义另一个上下文。这不再有效：“警告：无状态函数组件无法提供引用。尝试访问此引用将失败。”
import { MuiPickersUtilsProvider, DatePicker } from "@material-ui/pickers";
const [selectedDate, setSelectedDate] = React.useState(new Date());
const [open, setOpen] = useState(false);

<MuiPickersUtilsProvider utils={DateFnsUtils}>
  <button onClick={() => setOpen(isOpen => !isOpen)}>Open Picker</button
  <DatePicker onChange={()=> handleDateChange()} open={open} />
</MuiPickersUtilsProvider>