是否有另一个React表单库在形式组件上保持完整的状态卸载/重新启动?

发布于 2025-01-28 00:51:45 字数 563 浏览 5 评论 0原文

我想将我们的前端基础架构迁移到Redux-Form上,这似乎已被放弃了。我们有具有多种形式的项目,可以利用DestriconOnunMount = {false}选项设置在(Redux-form)表单上。

我们有向导类型的过程和其他CRUD类型应用程序,其中在每个选项卡上使用不同的表单上显示了记录,并且React-Router确定正在渲染哪种表单组件。我们的自定义字段组件使用该字段的元信息来视觉显示字段验证状态&错误消息还基于该字段是否已访问。在查看跨多个形式组件(在多标签UI中)分开的记录时,用户在切换回先前访问的表单时需要查看相同的形式状态。

在redux-form中,设置了DestrionOnunMount = {false}时,完整的形式状态持续存在,这意味着在重新安装组件时,将重新补充完整状态(访问,触摸,错误等)。这确实很有用,因为当组件重新启动时,形式的组件状态将被补充水化。

我研究了反应形式& formik,它们似乎并没有提供一种在卸载/重新安装表单组件的过程中保存/还原完整形式状态的方法。

是否还有其他支持此图书馆的图书馆(并且维护得很好),或者也许有一种方法可以以我所缺少的形式/反应基本形式实现这一目标?

I'm wanting to migrate our front-end infrastructure off redux-form which seems to be largely abandoned now. We have projects with multiple forms that utilise the destroyOnUnmount={false} option set on the (redux-form) Form.

We have wizard type processes, and other CRUD type apps where a record is displayed across multiple tabs with a distinct form used on each tab, with react-router determining which form component is being rendered. Our custom field components use the field's meta information to visually display a fields validation state & error message based also on whether the field has been visited. When viewing a record that is split across multiple form components (in a multi-tab UI), a user needs to see the same form state when they switch back to a previously visited form.

In redux-form, the complete form state persists in the redux store when destroyOnUnmount={false} is set, which means when remounting the form component the complete state is rehydrated (visited, touched, error, etc). This is really useful as form component state is rehydrated when the component remounts.

I've looked at react-final-form & formik, and they don't appear to provide a way to save/restore the full form state across unmounting/remounting of the form component.

Are there other libraries that support this (and are well maintained), or perhaps there's a way to achieve this in formik/react-final-form that I'm missing?

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

耳根太软 2025-02-04 00:51:45

您可以检查 react-hook-form

另外,请查看 wizard type Process 示例在这里

You can checkout react-hook-form.

Also, check out the wizard type process example here.

蓝海似她心 2025-02-04 00:51:45

看来您可以使用最终形式

创建最终形式的实例来实现此目的:

import { createForm } from "final-form";
const form = createForm({onSubmit: fn});

然后,您可以将该表单实例传递给表单组件:

<Form form={form}>

AFAIK,这样,您可以在渲染中保留形式状态。

It seems that you can achieve this using final-form

Create an instance of final-form:

import { createForm } from "final-form";
const form = createForm({onSubmit: fn});

Then, you can pass that form instance to the Form component:

<Form form={form}>

afaik, this way you can preserve form state across renders.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文