ReduxFrom-哪个字段已经过验证并显示错误?

时间:2019-05-08 14:10:43

标签: reactjs validation redux-form

概述

我正在尝试将ReduxForms与Revalidate.js一起使用。 ReduxForms运行良好,并且向用户显示了验证。

客观

我的表格被分类为手风琴。我想通知用户手风琴中的某个字段是否有错误,因此他们不必为了发现错误而扩展部分。

问题

在当前设置下,整个表单在加载时均经过验证,并且始终显示为无效,但是在触摸字段之前,用户看不到任何视觉错误。

  

如何通知父类组件某个字段现在显示错误(触摸&& !!错误)?

我需要一个被触摸且无效的输入字段的列表,但无法将这些信息传递给我的父组件,而不会遇到生命周期问题。我相信我可以通过更新所有无状态组件以使用redux然后再使用mapStateToProps来解决此问题,但是对于某些在概念上似乎很常见的东西来说,这似乎有些过分了。

是否有一种更干净的方法来设置我的redux表单,以便我可以知道哪些字段无效并被触摸了?

我已经引用了Redux Form Selectors,但无法获得我需要的信息。

示例字段

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;
  

在组件级别上,我拥有所需的信息,但是我需要将此数据获取到父组件,但是考虑到它作为通过... input和meta传递的道具,该数据应该已经可用。找不到它。

0 个答案:

没有答案