Javascript 材质UI DateTimePicker在错误位置渲染

我通过启用“打开”道具，在“渲染”页面上立即渲染一个新的材质ui日期时间选择器

<Grid item xs={6} className={styles.CampaignDates_calendar_right}>
  <MuiPickersUtilsProvider utils={DateFnsUtils} className={styles.CampaignDates_calendar_right}>
   <KeyboardDatePicker
      open
      disableToolbar
      variant="inline"
      format="MM/dd/yyyy"
      margin="normal"
      id="date-picker-inline"
      value={date}
      onChange={handleDateChange}
   />
   </MuiPickersUtilsProvider>
</Grid>

当我玩这些值时，我可以在日历上移动，但我不确定是什么首先触发了这些值

这是我想要的样子

以下是它是如何寻找一些原因的

注意：当我不使用打开道具时，它可以正常工作，但我希望日历打开渲染，这就是我使用打开道具的原因

<Grid item xs={6} className={styles.CampaignDates_calendar_right}>
  <MuiPickersUtilsProvider utils={DateFnsUtils} className={styles.CampaignDates_calendar_right}>
   <KeyboardDatePicker
      open
      disableToolbar
      variant="inline"
      format="MM/dd/yyyy"
      margin="normal"
      id="date-picker-inline"
      value={date}
      onChange={handleDateChange}
   />
   </MuiPickersUtilsProvider>
</Grid>

---

谢谢

在页面加载时让选择器打开实际上非常简单，但在使用

打开

道具时，您需要注意的是，现在您必须自己处理选择器的显示状态，因为MUI不再为您执行此操作

因此，让我们首先在页面加载时将选择器呈现在其适当的位置。为此，我们将使用一个状态变量

open

，并将其设置为

false

，以便在弹出选择器打开之前为MUI留出时间来正确渲染所有内容。然后使用

useffect

在第二次渲染时将

open

设置为

true

，这将发生得非常快，甚至没有人会注意到

因此，以下是您需要的：

export default function MaterialUIPickers() {
  // The first commit of Material-UI
  const [date, setSelectedDate] = React.useState(
    new Date("2021-03-01T21:11:54")
  );

  const [open, setOpen] = React.useState(false);

  React.useEffect(() => {
    setOpen(true);
  }, []);

  const handleDateChange = (date) => {
    setSelectedDate(date);
  };

  return (
    <MuiPickersUtilsProvider utils={DateFnsUtils}>
      <Grid container justify="space-around">
        <KeyboardDatePicker
          open={open}
          disableToolbar
          variant="inline"
          format="MM/dd/yyyy"
          margin="normal"
          id="date-picker-inline"
          label="Date picker inline"
          value={date}
          onChange={handleDateChange}
          onClose={() => setOpen(false)}
          onOpen={() => setOpen(true)}
        />
      </Grid>
    </MuiPickersUtilsProvider>
  );
}

---

这些是手动处理打开状态所必需的。下面是一个沙盒：

看起来您必须至少重新启动一次（例如通过更新状态）才能获得正确的位置

不幸的是，我们的用户界面团队。在v4中，

键盘日期选择器

正在成为

桌面日期选择器

---

，它从正确的位置开始，无需自己重新播放。

干杯，谢谢

...
   onClose={() => setOpen(false)}
   onOpen={() => setOpen(true)}
...