MUI DatePicker已显示错误但表单仍可提交，如何阻止？

要阻止错误状态下的表单提交，你需要把日期字段的错误状态和表单提交逻辑关联起来，具体步骤如下：

• 添加错误状态变量
  在组件状态中新增toDateError，用来跟踪结束日期是否违反minDate规则：

  const [toDateError, setToDateError] = useState(false);
  

• 同步错误状态与日期变化
  在起始日期和结束日期的变更函数中，实时校验日期逻辑并更新错误状态：

  const handleFromDateChange = (date) => {
    setFromDate(date);
    // 起始日期变更后，重新校验结束日期
    if (toDate && date && toDate.isBefore(date)) {
      setToDateError(true);
    } else {
      setToDateError(false);
    }
  };
  
  const handleToDateChange = (date) => {
    setToDate(date);
    // 直接校验当前结束日期是否合法
    if (fromDate && date && date.isBefore(fromDate)) {
      setToDateError(true);
    } else {
      setToDateError(false);
    }
  };
  

• 在提交函数中拦截错误
  修改表单提交函数，当toDateError为true时，终止提交流程并提示用户：

  const handleSubmit = (e) => {
    e.preventDefault();
    if (toDateError) {
      alert("结束日期不能早于起始日期，请修正后提交");
      return;
    }
    // 这里写正常的表单提交逻辑
    console.log("表单提交成功", { description, fromDate, toDate });
  };
  

• 绑定错误状态到DatePicker
  确保DatePicker的错误样式和我们的状态保持一致：

  <DatePicker
    label="To Date"
    value={toDate}
    onChange={handleToDateChange}
    minDate={fromDate}
    error={toDateError}
  />
  

这样修改后，当结束日期早于起始日期时，表单会被阻止提交，同时保留原有的错误样式提示。

内容的提问来源于stack exchange，提问作者todevv