首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >手动触发验证(验证Formik表单)按钮单击,即使字段未被触摸

手动触发验证(验证Formik表单)按钮单击,即使字段未被触摸
EN

Stack Overflow用户
提问于 2021-04-20 18:36:29
回答 1查看 2.1K关注 0票数 1

在我们的React应用程序中,一个页面中有多个表单。我们将Formik和Yup分别用于表单和验证。

目前,只有当字段/表单被触摸时才会触发验证。我们在Formik上构建了一个包装器,在模糊/焦点事件上提交表单。

现在,要求是在一个页面中显示包含多个Formik表单的页面中所有所需字段的错误。

为了进一步澄清,我的包装器看起来像

代码语言:javascript
运行
复制
    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>
    );
EN

回答 1

Stack Overflow用户

发布于 2021-04-20 18:46:19

处理这种情况有多种方法,但是您可以在这里使用Formik的fieldarray。

代码语言:javascript
运行
复制
https://formik.org/docs/api/fieldarray

当您提交时,您将在其中得到一个数组和一个表单列表,然后您可以简单地添加和删除表单,并且可以使用Yup轻松地进行验证。

票数 -1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/67184522

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档