material-ui - 如何从 Flat 或 Raised 按钮元素触发 Material UI 日期选择器元素

Question

我正在尝试从工具栏元素内的 Raised 按钮打开日期选择器对话框，但没有任何乐趣。

在浏览了文档后，我没有找到解决方案。我尝试将日期选择器放在平面按钮中，如下所示：

<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>

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

任何帮助将不胜感激

Answer 1

你必须从 DatePicker 组件的 refs 中打开它

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

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

Answer 2

在您的 onTouchTap 事件中，您可以直接将组件从 ReactDOM 渲染到容器元素（通常是 div）中：

//on TouchTap
handleRaisedButtonTap() {
     ReactDOM.render (<DatePicker ... />, 
             document.getElementById('div datepicker')); 
}

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

Answer 3

使用 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>