У меня есть родительский компонент формы, который отображает 2 дочерних компонента поля.
Детский компонент имеет 2 реквизита, которые я использую для проверки. Сначала validateOnLoad, который я могу использовать для запуска проверки правильности этого компонента. Второй реквизит - это onValidation реквизит, который я использую для выполнения обратного вызова после завершения проверки. Обратный вызов будет передан обратно fieldID и validationResults проверки.
У родителя есть состояние, которое отслеживает состояние confirmEntry. Это отслеживает, когда была нажата кнопка Submit . У родителя также есть ref, называемый firstErrorField (говорит сам за себя).
Я пытаюсь сделать следующее:
- Пользователь нажимает Отправить .
- Устанавливает состояние
confirmEntry на true. Изменение этого состояния должно привести к повторной визуализации моего родителя.
- Значение
confirmEntry, которое сейчас true, передается в validateOnLoad детскую опору. Это запускает проверку дочернего компонента.
- Когда проверка будет завершена, мне нужно сделать следующее:
- Проверьте результаты проверки.
- Если имеется ошибка проверки, пометьте
firstErrorField знаком fieldID, который я получил после проверки.
- Установите
confirmEntry на false, потому что я не хочу, чтобы Submit продолжался.
- Переместите фокус на это конкретное поле, чтобы пользователь знал, к какому полю он должен обратиться.
- Однако, если проверка прошла успешно, продолжите отправку.
Мне сложнее всего заставить его работать с useEffect.
Вот код и поле , которое имеет обе реализации. В реализации класса вы увидите, что проверка проверяется и продолжается только тогда, когда оба поля формы являются действительными. Однако в реализации ловушек отправка формы продолжается, даже если поля еще не проверены.
Любая помощь в этом будет оценена.