ReduxFrom - Какое поле было проверено и показывает ошибку? - PullRequest
Новая
       3

ReduxFrom - Какое поле было проверено и показывает ошибку?

0 голосов
/ 08 мая 2019

Обзор

Я пытаюсь использовать ReduxForms вместе с Revalidate.js.ReduxForms работает отлично, и проверки показываются пользователю.

Объективно

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

Проблема

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

Как я могу сообщить родительскому компоненту класса, что поле теперь показывает ошибку (touch && !! error)?

Мне нужен список полей ввода, к которым прикасались иневерный, но не смог передать эту информацию моему родительскому компоненту, не столкнувшись с проблемами жизненного цикла.Я полагаю, что я могу решить эту проблему, обновив все мои компоненты без сохранения состояния, чтобы использовать redux, а затем mapStateToProps, но это кажется излишним для чего-то, что концептуально кажется обычным явлением.знаете, какие поля являются недопустимыми и касались?

Я ссылался на Селектор форм Redux , но не могу получить нужную мне информацию.

Поле образца 

import React from "react";

import { Form } from "react-bootstrap";
import Aux from '../hoc/aux';
const TextInput = props => {
  const {
    input,
    label,
    type,
    placeholder,
    required,
    smallLabel,
    attempt,
    helperText,
    meta: {error, touched}
  } = props;


  // Set label class to small if props inform component that label should be small
  let labelStyle = ""
  if(smallLabel){
    labelStyle= " small-label"
  }
  // Removes validated style for components not required
  let formStyle = ""
  if(!required){
    formStyle= " not-required"
  }

  // Adds validation to input fields that are not required but are completed and valid
  if(!required && input.value.length > 0) {
    formStyle= " not-required has-value"
  }

  return (
    <Aux>
      <Form.Label className={'mb-1' + labelStyle}>{label} {required ? <sup className="warning">*</sup> : null }</Form.Label>
      <Form.Control
        className={formStyle}
        type={type}
        {...input}
        placeholder={placeholder}
        isInvalid={(touched || attempt) && !!error}
        isValid={!error}
      />
      {helperText && !touched && !attempt ? (
        <Form.Text className="text-muted">
        {helperText}
      </Form.Text>
      ): null}
      {(touched || attempt) && !!error ? (
        <Form.Control.Feedback type="invalid">{error}{"\u00a0"}</Form.Control.Feedback>
      ) : <span>{"\u00a0"}</span> }
    </Aux>
  );
};

export default TextInput;

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

...