Проверяйте поле ввода избыточной формы при входе пользователя

Question

Есть ли способ проверить поле ввода в форме приведения, когда пользователь вводит значение? Все мои проверки работают, когда я нажимаю или нажимаю кнопку отправки. Я хочу, чтобы мои проверки запускались, когда пользователь печатает. Мой код для поля такой:

<div className="fieldRow noMargin">
            <Field
              id={FIRST_TIME_OTP_NUMBER}
              name={FIRST_TIME_OTP_NUMBER}
              component={InputTextField}
              className="text xxs"
              classNameInvalid="text xxs error"
            />
          </div>

Answer 1

Вы можете проверить, является ли поле active из метаданных (реквизиты под мета-ключом), и показать ошибку, если его значение равно true.

const renderField = ({input, label, type, meta: {active, touched, error, warning}}) => (
    <div>
        <label>{label}</label>
        <div>
            <input
                {...input}
                placeholder={label}
                type={type}
                onFocus={input.onFocus}
            />
            {(active || touched) &&
            ((error && <span>{error}</span>) ||
                (warning && <span>{warning}</span>))}
        </div>
    </div>
);

ПРИМЕЧАНИЕ. Он будет работать только в том случае, если вы передаете onFocus в элемент ввода.

Codesandbox demo