Material UI DateTimePicker 渲染位置錯誤

Question

我通過啟用 open 屬性在頁面渲染上立即渲染一個新的材質 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>

出於某種原因，雖然它呈現在屏幕的隨機部分，但我不明白為什么。 更奇怪的是，一旦我更改代碼中的道具並熱重新加載，它就會立即卡入應有的位置。

我看到日歷正在加載這個 css

    top: 361px;
    left: 126px;

當我使用這些值時，我可以在日歷中移動，但我不確定是什么首先觸發了這些值。

這是我想要的樣子

這是它尋找某種原因的方式

注意：當我不使用 open 道具時它可以正常工作，但我想讓日歷打開渲染，這就是我使用 open 道具的原因。

謝謝

Answer 1

實際上，在頁面加載時打開 Picker 非常簡單，但是在使用open道具時您需要注意的是，您現在必須自己處理選擇器的顯示 state，因為 MUI 不再會這樣做你。

因此，讓我們首先在頁面加載時將選擇器呈現在適當的位置。 為此，我們將使用 state 變量open並將其設置為false ，以便在我們打開 Picker 之前給 MUI 時間正確渲染所有內容。 然后使用useEffect在第二次渲染時將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>
  );
}

現在注意這些人：

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

這些是手動處理打開的 state 所必需的。 這是一個沙箱： https://codesandbox.io/s/material-demo-forked-jbw9o?file=/demo.js

Answer 2

看起來您被迫至少重新渲染（例如通過更新狀態）一次以獲得正確的 position。

不幸的是，Material UI 團隊不再支持 v3 。 而在 v4 KeyboardDatePicker正在成為DesktopDatePicker 。

這是DesktopDatePicker的示例，它以正確的 position 開頭，無需自己重新渲染。