材质 UI 日期选择器日历在页面渲染时立即打开

Posted 2023-05-07

【中文标题】材质 UI 日期选择器日历在页面渲染时立即打开

【英文标题】：Material UI Date Picker Calendar Open Immediately On Page Render

【发布时间】：2021-06-10 02:27:08

【问题描述】：

我有一个来自 Material UI 的日历，它只有在我点击它时才会打开，所以它会像这样开始

然后打开这个

无论如何我可以拥有它以便在页面呈现后立即打开它？我不确定我是否遗漏了一些开箱即用的材料提供给我们的道具，或者是否有其他方法可以让它一直打开。

这是我到目前为止所拥有的（直接来自那里的文档）

 <MuiPickersUtilsProvider utils=DateFnsUtils>
        <KeyboardDatePicker
          disableToolbar
          variant="inline"
          format="MM/dd/yyyy"
          margin="normal"
          id="date-picker-inline"
          label="Date picker inline"
          value=date
          // onChange=handleDateChange
          KeyboardButtonProps=
            'aria-label': 'change date',
          
        />


      </MuiPickersUtilsProvider>

谢谢

【参考方案1】：

您实际上可以使用open 属性。这是一个例子。

<MuiPickersUtilsProvider utils=DateFnsUtils>
    <KeyboardDatePicker
      open
      disableToolbar
      variant="inline"
      format="MM/dd/yyyy"
      margin="normal"
      id="date-picker-inline"
      label="Date picker inline"
      value=date
      // onChange=handleDateChange
      KeyboardButtonProps=
        'aria-label': 'change date',
      
    />


  </MuiPickersUtilsProvider>

如果你想用状态来控制它，那么创建一个默认为 true 的状态变量。

this.state =  isDatePickerOpen: true ;

然后使用状态打开和关闭选择器。

<MuiPickersUtilsProvider utils=DateFnsUtils>
    <KeyboardDatePicker
      open=this.state.isDatePickerOpen
      disableToolbar
      variant="inline"
      format="MM/dd/yyyy"
      margin="normal"
      id="date-picker-inline"
      label="Date picker inline"
      value=date
      // onChange=handleDateChange
      KeyboardButtonProps=
        'aria-label': 'change date',
      
    />


  </MuiPickersUtilsProvider>

【讨论】：

所以这行得通，日历现在在渲染时打开，但现在它在我的屏幕的随机部分打开了一些奇怪的 css 配置``` top: 361px;左：284px； ``` 但是，当我更改任何道具并热重载时，css 消失了，一切都很好，但是在刷新时，css 全部搞砸了。知道为什么吗？谢谢