如何從自定義掛鈎驗證中正確顯示錯誤消息？

Question

我有一個多步驟表格。 目前，父組件正在通過傳遞給表單組件的 props 獲取 state 數據。 提交按鈕位於父組件中。 這有效並且步驟有效。 但是，當單擊輸入字段時，當它失去焦點時，它會觸發多步表單中每個字段的錯誤消息，而不是觸發錯誤的字段是唯一出現錯誤的字段。 我正在使用<TextField/>的error道具來觸發用戶的錯誤視覺效果。 字段也在 validateAuth.js 中validateAuth.js ，值在useFormValidation.js中處理。 我還堅持從父組件中的一個提交按鈕提交來自父組件 state 的用戶注冊表單數據。

我已經嘗試設置 errors={errors} 並在 useEffect 掛鈎中使用 if 語句，例如

React.useEffect(() => {
  if (props.errors) {
    setErr(true)
  }
}, [err, props.errors]);

但是，這導致我的整個頁面加載時顯示錯誤而沒有任何用戶輸入。

這是一個與我的確切開發設置相似的代碼沙箱。

代碼是相同的，只是用最基本的要素進行了簡化。

https://codesandbox.io/s/hooks-custom-authentication-final-8ldcw

預期結果：多步表單加載，每次用戶嘗試通過單擊下一步將 go 進行下一步時驗證字段，如果有錯誤，僅以紅色顯示導致錯誤的字段，並通過 material-ui helpertext 顯示錯誤文本。 當該步驟中的輸入字段發生錯誤時，用戶不應該能夠 go 到下一步。 當某個字段顯示錯誤時，未出錯字段的 rest 將保持在其正常的非錯誤 state 中。 在最后一步，驗證按鈕提交用戶數據以進行注冊。

實際：一旦單擊任何輸入字段，然后用戶單擊其他任何地方並導致該字段失去焦點，表單就會對所有字段進行錯誤處理。 無論錯誤如何，用戶都可以通過注冊步驟自由點擊。

Answer 1

如果您檢查您的validateAuth.js ，此代碼將檢查所有輸入作為一個整體。 第一次調用這個 function 時，所有輸入值都是空的，這就是為什么你在所有輸入中都會出錯。 如果您在同一頁面中輸入所有內容並在按下提交按鈕時進行驗證，我認為這種代碼是合適的。 但是，在您的情況下，您應該更改驗證以檢查單個輸入值，如下所示

export default function validateAuth(input) {
 let errors = {};
 switch (input.key) {
 case "email": {
  if (!input.value) {
    errors.email = "Required Email";
  } else if (
    !/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i.test(input.value)
  ) {
    errors.email = "Invalid email address";
  }
  return errors;
 }
 case "password": {
  if (!input.value) {
    errors.password = "Required Password";
  } else if (input.value.length < 6) {
    errors.password = "Password must be at least 6 characters";
  }
  return errors;
 }
 case "username": {
  if (!input.value) {
    errors.username = "Required Username";
  } else if (input.value.length < 6) {
    errors.username = "Username must be 6-12 characters";
  }
  return errors;
 }
 case "verify": {
  if (!input.value) {
    errors.verify = "Required Verification";
  } else if (input.value.length < 1) {
    errors.verify = "Please input the 4 digit code.";
  }
  return errors;
 }
 default:
   return errors;
 }
}

然后，您還應該更改您的handleBlur function 以僅發送單個輸入值

function handleBlur(e) {
 const { name, value } = e.target;
 const input = {
  key: name,
  value
 };
 const validationErrors = validate(input);
 setErrors({
  ...errors,
  ...validationErrors
 });
}

然后，您應該添加對錯誤 object 的檢查以啟用/禁用您的下一個按鈕