我正在尝试将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传递的道具,该数据应该已经可用。找不到它。