Antd я не могу получить ошибки при вводе события onChange

В Antd мне нужно получить ошибки в событии onChange, но даже в поле есть ошибка. При вводе в это поле я не вижу ошибок. Например ;

https://stackblitz.com/edit/react-qurm1n?file=demo.tsx

Шаг за шагом, чтобы решить эту проблему;

Откройте консоль и нажмите кнопку «Отправить». В консоли вы увидите ошибки во 2 поле. В имени пользователя и пароле.
Начните вводить имя пользователя и проверьте консоль. В имени пользователя нет ошибок, даже если оно еще недействительно.

Как я могу решить эту проблему? Как я могу увидеть ошибки в событии onChange? Спасибо за помощь!

Я попробовал сделать это с помощью onBlur, и да, это работает, но мне нужно сделать это в событии onChange. Я предполагаю, что antd не показывает ошибку, пока поле находится в состоянии onValidating.

reactjs angular react-native next.js antd

09.05.2024 08:09

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Массив зависимостей в React

Все о массиве Dependency и его связи с useEffect.

Компонент против элемента в ReactJS - секрет оптимизации производительности за счет повторного использования элементов

Проще говоря, компонент - это фабрика для создания элементов.

Руководство по использованию хука useEffect для методов жизненного цикла React

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Похоже, проблема со временем: форма проверяется до ее обновления, простое решение — обернуть код в setTimeout!

  <Form.Item<FieldType>
    label = "Username"
    name = "username"
    rules = {[{ required: true, min: 9, message: 'Error Message' }]}
  >
    <Input
      onChange = {() => {
        setTimeout(() => console.info(form.getFieldsError()));
      }}
    />
  </Form.Item>

Демо-версия Stackblitz

Спасибо чувак! Он работает так, как я хотел. Я не думал об этом.

— 09.05.2024 08:31

09.05.2024 08:29