Material-UI 选择器在模糊而不是更改时触发验证？

Question

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

使用

时，如何在 blur 而不是 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

Answer 1

根据 documentation，onChange 是必需的。但是，您不需要在 onChange 中设置 value。如果您在该函数中省略 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>
  );
}

Answer 2

由于 onChange 是强制性的，在回调中返回 undefined 解决了问题，但破坏了 datePicker select 选项（不将 selected 日期应用于输入场）。

由于上述原因，应该使用 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

Material-UI 选择器在模糊而不是更改时触发验证？

Material-UI pickers trigger validation on blur not on change?

javascript

datepicker

onblur

reactjs

material-ui