如何将空值传递给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}