如何将空值传递给 DatePicker 并避免输入阻塞？答案

【问题标题】：How to pass an empty value to DatePicker and avoid input blocking?如何将空值传递给 DatePicker 并避免输入阻塞？
【发布时间】：2026-01-12 02:25:01
【问题描述】：

当我将 DatePicker 的初始值设置为 null 时，它会阻止键盘输入。如何避免？沙盒示例https://codesandbox.io/embed/silly-black-y0dn7

function KeyboardDatePicker(props) {
  const [selectedDate, handleDateChange] = useState(null);

  return (
    <MuiPickersUtilsProvider utils={MomentUtils}>
      <DatePicker
        keyboard
        clearable
        label="Masked input"
        format="DD.MM.YYYY"
        mask={value =>
          value
            ? [/\d/, /\d/, ".", /\d/, /\d/, ".", /\d/, /\d/, /\d/, /\d/]
            : []
        }
        value={moment(selectedDate)}
        onChange={date => {
          handleDateChange(date);
        }}
        disableOpenOnEnter
        animateYearScrolling={false}
      />
    </MuiPickersUtilsProvider>
  );
}

【问题讨论】：

我对 value prop codesandbox.io/embed/silly-black-y0dn7 进行了一些更改，这是您要找的东西吗@fetchenko？
输入仍然被阻止，我无法使用键盘输入新值

标签： reactjs material-ui

【解决方案1】：

尝试从一个有效的日期对象开始，而不是像这样的 null

  const [selectedDate, handleDateChange] = useState(new Date());

或者，如果您希望以空白日期开头，这应该可以：

  const [selectedDate, handleDateChange] = useState(null);
...
        value={selectedDate ? moment(selectedDate) : null}

【讨论】：

是否可以传递一个空值？ new Date() - 填写当前日期
如果我使用第二个选项，它的行为就像我一开始就没有提供初始值一样，它会发出警告“组件正在更改要控制的文本类型的不受控制的输入。”在用户确实选择了一个日期之后

【解决方案2】：

const [selectedDate, handleDateChange] = useState(null);
...
value={selectedDate ? moment(selectedDate) : null}

并将这个道具添加到组件中： emptyLabel="put your here placeholder"

【讨论】：