Javascript 物料UI选取器在模糊时触发验证，而不是在更改时触发验证？

一旦您开始在DatePicker组件中输入，就会触发验证

当使用时，如何在blur而不是onInputChange上触发验证

@material ui/pickers

用于

物料ui v4

将值传递给blur函数应该有效，并且在更改时忽略，但是一旦删除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>
  );
}

导出默认函数materialUIPackers（）{
const[selectedDate，setSelectedDate]=React.useState（）；
const handleDateChange=（日期）=>{
设置选定日期（日期）；
};
常量车把LUR=（e）=>{
设置所选日期（如目标值）；
};
返回(
);
}

---

根据需要进行

onChange

。但是，您不需要在

onChange

中设置

值。如果省略该函数中的
setSelectedDate
，而仅在
onBlur
中执行，则日期设置和验证将仅在
blur
事件中发生


导出默认函数materialUIPackers（）{
const[selectedDate，setSelectedDate]=React.useState（）；
const[wasOpen，setwasOpen]=React.useState（）；
const handleDateChange=（日期）=>{
如果（已打开）
{
设置选定日期（日期）；
}
};
常量车把LUR=（e）=>{
设置所选日期（如目标值）；
};
const handleOnOpen=（）=>{
SetwasOpen（真）；
};
常量handleOnClose=（）=>{
SETWASWOPEN（假）；
};
返回(
);
}
因为
onChange
是强制的，所以在回调中返回
未定义的
可以解决问题，但会中断日期选择器选择选项（不会将所选日期应用于输入字段）

由于上述原因，应使用onAccept

，因此可以省略内部状态逻辑，这一点至关重要

代码

导出默认函数materialUIPackers（）{
const[selectedDate，setSelectedDate]=React.useState（）；
常量车把LUR=（e）=>{
设置所选日期（如目标值）；
};
返回(
未定义}
onAccept{setSelectedDate}
onBlur={handleBlur}
/>
);
}

---

此文档说明需要

onChange

：“请注意，所有组件都是受控的，这意味着需要传递

值
和
onChange
道具。”@patrickb没关系，让onChange填充值。。。但是验证只能在模糊上触发吗？我编辑了它来处理这个问题，但它看起来更糟，更粗糙。我不建议这样做，因为它只处理选择器被打开的情况，而不是其他可以用代码设置日期的情况。不过，也可以将
waswopened
状态泛化。其他人可能会有更好的建议。实际上，有一个名为onAccept的事件处理程序，我将在其中传递setSelectedDate，并可以将未定义的返回留给onChange
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>
  );
}