有没有办法禁用 MUI 日期选择器在页面加载时显示今天的日期答案

【问题标题】：Is there a way to disable MUI date picker showing today's date on page load有没有办法禁用 MUI 日期选择器在页面加载时显示今天的日期
【发布时间】：2021-11-17 11:54:38
【问题描述】：

我使用 mui datepicker，它在页面渲染上显示今天的日期，但实际上没有选择日期。我尝试不提供 defaultValue 道具，也尝试了这些：-

defaultValue={null}
defaultValue=""

仍然显示今天的日期

【问题讨论】：

那么您到底是如何使用它的呢？ codesandbox.io/s/… 如果我只是将值更改为 null，它不会显示默认值。您可能在代码中的某个位置设置了它？
@Leviathan 当我将value={value} 放在页面渲染时，该字段为空（这就是需要的），但即使我选择了一个日期，该日期也不会显示在该字段中
这些例子显然是有效的，所以你应该展示你的代码，或者 - 最好 - 构建一个codeandbox / codepen版本，就像我在评论中链接的那样，这样人们就可以看到并摆弄什么问题是。

标签： reactjs material-ui

【解决方案1】：

将null 传递给value 属性，而不是将其传递给defaultValue 属性

import React, { useState } from 'react';
import TextField from '@mui/material/TextField';
import AdapterDateFns from '@mui/lab/AdapterDateFns';
import LocalizationProvider from '@mui/lab/LocalizationProvider';
import DatePicker from '@mui/lab/DatePicker';

export default function BasicDatePicker() {
  const [value, setValue] = useState(null);

  return (
    <LocalizationProvider dateAdapter={AdapterDateFns}>
      <DatePicker
        label="Date"
        value={value}
        onChange={setValue}
        renderInput={(params) => <TextField {...params} />}
      />
    </LocalizationProvider>
  );
}

欲了解更多信息，请查看Date Picker

【讨论】：

这段代码onChange={(newValue) => {setValue(newValue);}}可以onChange={setValue}更优化。
@EmanueleScarabattoli 当我将value={value} 放在页面渲染上时，该字段是空的（这就是需要的），但即使我选择了一个日期，该日期也不会显示在该字段中
@AlanShajanMattathil 你必须将状态变量传递给value 属性，初始值为null。那么你必须将一个函数传递给onChange prop，它将接收用户输入的值作为第一个参数，你必须使用它来更新你传递给value prop 的状态变量。请参阅答案中的示例。
@AmjedOmar 我确实做到了，但它不起作用
@AlanShajanMattathil 该示例运行良好，请在codesandbox.io/s/date-picker-material-ui-7jnjo?file=/src/App.js 上查看它，因此请确保像答案中的示例一样正确实现value 和onChange 道具，否则显示代码你写，所以我们可以提供帮助。