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

Question

当我将 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>
  );
}

Answer 1

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

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

或者，如果您希望从空白日期开始，这应该有效：

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