React/Material UI日期选择Dialog输入框初始重叠问题求助

问题原因 #

Dialog初始化时，date类型的TextField因初始value为空，InputLabel未自动收缩，导致输入框高度计算异常，出现层叠。点击输入框触发组件重绘后，标签收缩，布局恢复正常。

解决方案 #

方案一：强制InputLabel收缩（推荐）

给每个日期TextField添加InputLabelProps={{ shrink: true }}，强制标签保持收缩状态，从根源避免布局错乱：

<TextField
  autoFocus
  margin="dense"
  label="Start Date"
  type="date"
  value={startDate}
  onChange={handleStartDateChange}
  fullWidth
  InputLabelProps={{ shrink: true }}
/>
<TextField
  margin="dense"
  label="End Date"
  type="date"
  value={endDate}
  onChange={handleEndDateChange}
  fullWidth
  InputLabelProps={{ shrink: true }}
/>

方案二：Dialog打开时触发重渲染

通过useEffect监听Dialog的打开状态，触发一次重渲染修正布局：

import React, { useState, useEffect } from 'react';

const DownloadDialog = () => {
  const [openDialog, setOpenDialog] = useState(false);
  const [startDate, setStartDate] = useState('');
  const [endDate, setEndDate] = useState('');

  useEffect(() => {
    if (openDialog) {
      // 更新现有状态触发重渲染
      setStartDate(prev => prev);
    }
  }, [openDialog]);

  // ... 其他原有代码
};

方案三：设置初始日期值

给日期状态设置一个符合ISO格式的初始值，让InputLabel自动收缩：

const [startDate, setStartDate] = useState(new Date().toISOString().split('T')[0]);
const [endDate, setEndDate] = useState(new Date().toISOString().split('T')[0]);

内容的提问来源于stack exchange，提问作者Mathew Cherian