为何Material-UI日期组件值与placeholder重叠且报受控输入警告？

1. 解决受控/非受控切换警告 #

这个警告的根本原因是currentValue的初始值为undefined。MUI的KeyboardDatePicker会判断如果传入的value是undefined，就默认按非受控模式处理，后续currentValue被赋值后模式切换就抛出警告。
修复方式：

• 给currentValue的状态初始化兜底为null，不要用undefined作为初始值
• 如果currentValue是从父组件传入的props，也需要对传入值兜底为null

示例初始化代码：

// 状态初始化时设默认null
const [currentValue, setCurrentValue] = useState(props.value ?? null);

2. 解决日期值和占位符重叠问题 #

重叠是因为组件的label没有正确感知到输入框已有值，没有自动上浮。可以通过给KeyboardDatePicker显式传入InputLabelProps控制label上浮状态来修复。

修复后的完整组件代码 #

return (
    <div>
      <KeyboardDatePicker
        error={!isValid()}
        id={id}
        label={placeholder}
        format="MM/dd/yyyy"
        value={currentValue ?? null}
        onChange={(date) => {
          setCurrentValue(date);
        }}
        KeyboardButtonProps={{
          "aria-label": "Change " + placeholder
        }}
        InputLabelProps={{
          shrink: Boolean(currentValue)
        }}
        fullWidth
      />
    </div>
  );

内容的提问来源于stack exchange，提问作者Hossein Fallah