Как мне получить мгновенную проверку полей формы в этом приложении React 18? ⇐ Javascript

[Гость]

Я работаю над приложением для чата с помощью React 18 и Firebase.

В компоненте Register.jsx у меня есть форма, которую я проверяю с помощью Simple Body Validator:

import React, { useState } из «реагировать»; импортировать FormCard из «../comComponents/FormCard/FormCard»; импортировать { сделать } из 'простого-тела-валидатора'; экспортировать функцию по умолчанию Register() { const InitialFormData = { firstName: '', LastName: '', адрес электронной почты: '', пароль: '', парольConfirm: '' }; const validationRules = { firstName: ['обязательный', 'строка', 'мин:3', 'макс:255'], LastName: ['обязательный', 'строка', 'мин:3', 'макс:255'], электронная почта: ['обязательный', 'электронная почта'], пароль: ['требуется', 'подтверждено'], Подтверждение пароля: ['обязательно'], }; const validator = make (initialFormData, validationRules); const [formData, setFormData] = useState(initialFormData); const [ошибки, setErrors] = useState(validator.errors()); const handleChange = (событие) => { const {имя, значение} = event.target; setFormData((prevFormData) => ({ ...prevFormData, [имя]: значение })); }; const handleSubmit = (событие) => { событие.preventDefault(); if (!validator.setData(formData).validate()) { setErrors(validator.errors()); } }; возвращаться ( Имя { error.has('firstName') ? ( {errors.first('firstName')
) : нулевой } Фамилия { error.has('lastName') ? (
{errors.first('lastName')
) : нулевой } Адрес электронной почты { error.has('электронная почта') ? (
{errors.first('email')
) : нулевой } Пароль { error.has('пароль') ? (
{errors.first('password')
) : нулевой } Подтвердить пароль { error.has('passwordConfirm') ? (
{errors.first('passwordConfirm')
) : нулевой } Отправить ); }
Если форма недействительна, то после попытки отправки сообщения об ошибках проверки отображаются, как и ожидалось:




Проблема
Если действительные данные вводятся в недопустимую форму, сообщения об ошибках проверки и классы не исчезают при вводе/изменении, как я считаю.

Действительные поля проходят проверку только при новом нажатии кнопки отправки, хотя я хочу, чтобы положительный отзыв был мгновенным.
Вопросы [*]Что я делаю не так? [*]Каков наиболее надежный способ добиться желаемого поведения?