Material-UI选择器是否触发模糊而不是更改？

问题描述

一旦您开始在DatePicker组件中键入内容，就会触发验证。

使用时如何触发模糊而不是onInputChange的验证

@material-ui/pickers的意思是material-ui v4

将值传递给模糊函数应该可以并忽略更改，但是一旦删除onChange事件，代码就会中断。

示例

export default function MaterialUIPickers() {
  const [selectedDate,setSelectedDate] = React.useState();

  const handleDateChange = (date) => {
    setSelectedDate(date);
  };

  const handleBlur = (e) => {
    setSelectedDate(e.target.value);
  };

  return (
    <muipickersutilsprovider utils={DateFnsUtils}>
      <KeyboardDatePicker
        id="date-picker-dialog"
        format="MM/dd/yyyy"
        value={selectedDate}
        onChange={handleDateChange}
        onBlur={handleBlur}
      />
    </muipickersutilsprovider>
  );
}

Muiv4 documentation

Stackblitz example

解决方法

根据documentation，onChange是必需的。但是，您不需要在value中设置onChange。如果您在该函数中省略了setSelectedDate，而只在onBlur中进行了设置，则日期设置和验证将仅在blur事件中发生。

export default function MaterialUIPickers() {
  const [selectedDate,setSelectedDate] = React.useState();
  const [wasOpened,setWasOpened] = React.useState();

  const handleDateChange = (date) => {
    if (wasOpened)
    {
      setSelectedDate(date);
    }
  };

  const handleBlur = (e) => {
    setSelectedDate(e.target.value);
  };

  const handleOnOpen = () => {
    setWasOpened(true);
  };

  const handleOnClose = () => {
    setWasOpened(false);
  };

  return (
    <MuiPickersUtilsProvider utils={DateFnsUtils}>
      <KeyboardDatePicker
        id="date-picker-dialog"
        variant="inline"
        format="MM/dd/yyyy"
        value={selectedDate}
        onChange={handleDateChange}
        onBlur={handleBlur}
        autoOk={true}
        onOpen={handleOnOpen}
        onClose={handleOnClose}
      />
    </MuiPickersUtilsProvider>
  );
}

,

由于onChange是强制性的，因此在回调中返回undefined解决了该问题，但中断了datePicker选择选项（不将所选日期应用于输入字段）。

由于上述原因，应使用onAccept，从而可以省略至关重要的内部状态逻辑。

代码

export default function MaterialUIPickers() {
  const [selectedDate,setSelectedDate] = React.useState();

  const handleBlur = (e) => {
    setSelectedDate(e.target.value);
  };

  return (
    <MuiPickersUtilsProvider utils={DateFnsUtils}>
      <KeyboardDatePicker
        id="date-picker-dialog"
        format="MM/dd/yyyy"
        value={selectedDate}
        onChange={()=>undefined}
        onAccept{setSelectedDate}
        onBlur={handleBlur}
      />
    </MuiPickersUtilsProvider>
  );
}

Stackblitz