Как правильно отобразить сообщение об ошибке из пользовательской проверки хуков? - PullRequest
Новая
       10

Как правильно отобразить сообщение об ошибке из пользовательской проверки хуков?

0 голосов
/ 20 октября 2019

У меня многоэтапная форма. В настоящее время родительский компонент получает данные о состоянии через реквизиты, передаваемые компонентам формы. Кнопка отправки находится в родительском компоненте. Это работает, и шаги работают. Однако при нажатии на поле ввода, когда оно теряет фокус, оно выдает сообщение об ошибке каждого поля в многоступенчатой ​​форме вместо поля, которое вызвало ошибку, и является единственным полем с ошибкой. Я использую error опору <TextField/>, чтобы вызвать визуальные ошибки для пользователя. Поля также проверяются в validateAuth.js, а значения обрабатываются в useFormValidation.js. Я также застрял при отправке данных формы регистрации пользователя из состояния родительских компонентов из одной кнопки отправки в родительском компоненте.

Я уже пытался установить ошибки = {ошибки} и использовать операторы if в пределахПерехватчики useEffect, такие как 

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

Однако, это привело к загрузке всей моей страницы с ошибками, отображаемыми без какого-либо пользовательского ввода.

Вот песочница с кодом, похожая на мои точные настройки разработки.

Код такой же, только упрощенный с базовыми элементами.

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

Ожидаемые результаты: многоступенчатая форма загружает, проверяет поля каждый раз, когда пользователь пытается перейтидля перехода к следующему шагу, нажав кнопку Далее, если есть ошибка, покажите поле, вызвавшее ошибку только красным, и отобразите текст ошибки через helpertext material-ui. Пользователь не должен иметь возможность перейти к следующему шагу, если в поле ввода в этом шаге возникает ошибка. Когда в поле отображается ошибка, остальные поля, которые не были ошибочными, остаются в своем нормальном состоянии с ошибками. На последнем шаге кнопка «Подтвердить» отправляет данные пользователя для регистрации.

Факт: форма вызывает ошибки во всех полях после нажатия любого поля ввода, затем пользователь щелкает в любом другом месте и приводит к тому, что поле теряет фокус. Пользователи могут свободно нажимать на шагах регистрации независимо от ошибок.

1 Ответ

1 голос
/ 20 октября 2019

Если вы проверите validateAuth.js, этот код проверит весь ввод в целом. При первом вызове этой функции все входные значения пусты, поэтому вы получили ошибку во всех входных данных. Я думаю, что этот вид кода подходит, если вы все вводите на одной странице и проверяете, когда нажата кнопка отправки. Но в вашем случае вы должны изменить свою проверку, чтобы проверять индивидуальное входное значение, например, 

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, чтобы она отправляла только одно входное значение

* 1007. *

Затем вы должны добавить объект проверки на ошибку, чтобы включить / отключить следующую кнопку

Edit Hooks Custom Authentication Final

...