问题描述
我正在使用 reactjs 和 lib unform 来处理我的应用程序的注册表结构。我需要用动态输入做一个更复杂的结构,然后,我做了一个分离的组件来使代码更有条理,到目前为止一切都很好,但是当我用 yup 进行验证时,我注意到子组件的字段没有得到我认为会得到的错误。
结果:只有主组件的字段有验证错误。
这里是主窗体结构的代码:
const CadastroAdvF3: React.FC = () => {
const { addToast } = usetoast();
const formRef = useRef<FormHandles>(null);
const handleSubmit = useCallback(
async data => {
formRef.current?.setErrors({});
try {
// validation
const schema = Yup.object().shape({
professionalDescription: Yup.string()
.required('Descrição profissional obrigatória')
.min(
300,'A descrição profissional deve ter no mínimo 300 caracteres.'
),// the following itens are inside the react component formationArea
// and professionalExperience.
institution: Yup.string().required('Instituição Obrigatória'),course: Yup.string().required('Curso Obrigatório'),from: Yup.string().required('Data Obrigatória'),until: Yup.string().required('Data Obrigatória'),role: Yup.string().required('Cargo Obrigatório'),business: Yup.string().required('Empresa/Instituição Obrigatória')
});
await schema.validate(data,{
abortEarly: false
});
addToast({
title: 'Informações regisTradas com sucesso.',type: 'success'
});
} catch (error) {
const errors = getValidationErrors(error);
formRef.current?.setErrors(errors);
}
},[addToast]
);
return (
<Styled.Container>
<Styled.Content>
<Styled.Form>
<h3>Formulário</h3>
<Form
ref={formRef}
onSubmit={data => {
handleSubmit(data);
}}
>
{/* <div className="twoColumns">
<Input row name="firstName" placeholder="Nome" />
<Input row name="lastName" placeholder="Sobrenome" />
</div> */}
<Input label="Foto de Perfil" name="profilePhoto" type="file" />
<TextArea
name="professionalDescription"
label="Descrição Profissional"
placeholder="Sua descrição profissional..."
/>
<FormationArea />
<ProfessionalExperience />
<SuperButton type="submit">Próximo</SuperButton>
</Form>
</Styled.Form>
</Styled.Content>
</Styled.Container>
);
};
export default CadastroAdvF3;
以及 FormationArea 组件的结构示例:
const FormationArea: React.FC = () => {
// ...
return (
<context.Provider value={{ handleRemoveFormationArea }}>
<Styled.Container>
<div className="header">
<h3>Formação</h3>
<button type="button" onClick={handleAddFormationArea}>
Adicionar Instituição
</button>
</div>
{formationAreaFields.map((formationAreaFields,index) => {
return <Item key={index} Pkey={index} />;
})}
</Styled.Container>
</context.Provider>
);
};
// above the component that is rendered in the formation area
const Item: React.FC<KeyComponentProp> = ({ Pkey }) => {
// ....
return (
<CourseAreasContext.Provider
value={{ handleRemoveCourseArea,handleAddCourseArea }}
>
<div className="item">
<Scope path={`formation[${Pkey}]`}>
{/* <h4>Instituição</h4> */}
<Styled.PersonalizedColumnsFormation>
<Input
label="Instituição"
name="institution"
placeholder="Instituição"
/>
{Pkey > 0 && (
<button
type="button"
onClick={() => handleRemoveFormationArea(Pkey)}
>
<TiTrash size={23} />
</button>
)}
</Styled.PersonalizedColumnsFormation>
{CourseAreaFields.map((course,index) => {
return <DownScopeAreas key={index} Pkey={index} />;
})}
</Scope>
</div>
</CourseAreasContext.Provider>
);
};
export default FormationArea;
解决方法
暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!
如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@)