在我们的React应用程序中,一个页面中有多个表单。我们将Formik和Yup分别用于表单和验证。
目前,只有当字段/表单被触摸时才会触发验证。我们在Formik上构建了一个包装器,在模糊/焦点事件上提交表单。
现在,要求是在一个页面中显示包含多个Formik表单的页面中所有所需字段的错误。
为了进一步澄清,我的包装器看起来像
const { onSubmit, className, style, ...restProps } = this.props;
return (
<div
ref={this.setContainerRef}
onBlur={this.handleBlur}
onFocus={this.handleFocus}
tabIndex={-1}
className={className}
style={style}
>
<Formik
{...restProps}
ref={this.setFormikRef}
initialValues={this.props.currentValues}
validateOnBlur={true}
validateOnChange={false}
render={(formikProps: FormikProps<T>) => (
<>
<DirtyFormReporter onChange={this.handleDirtyFormReport} isDirty={formikProps.dirty} />
{this.props.render(formikProps, this.createEditBlurFormActions())}
</>
)}
onSubmit={this.handleSubmit}
/>
{ReactDOM.createPortal(<InputBlocker text="Updating" isEnabled={this.state.isSubmitting} />, document.body)}
</div>
);发布于 2021-04-20 18:46:19
处理这种情况有多种方法,但是您可以在这里使用Formik的fieldarray。
https://formik.org/docs/api/fieldarray当您提交时,您将在其中得到一个数组和一个表单列表,然后您可以简单地添加和删除表单,并且可以使用Yup轻松地进行验证。
https://stackoverflow.com/questions/67184522
复制相似问题