Question

我正在尝试从工具栏元素中的“凸起”按钮打开日期选择器对话框，没有任何欢乐。

完成文档后，我找不到解决方案。我尝试将日期选择器放在Flat Button中，如下所示：

<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组件的引用中打开它

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>

如何从Flat或Raised按钮元素触发Material UI Date选择器元素

3 个答案: