【问题标题】:React form : best pattern or library [closed]反应形式:最佳模式或库[关闭]
【发布时间】:2016-09-04 05:54:07
【问题描述】:

我需要帮助,我正在使用 React 15.0.2(带有通量),我需要创建复杂的表单。

我不知道是否有某种库或模式可以做到这一点。

我已经尝试过 Winterfell,但我发现它很长而且很难制作出一个小小的形状。 我也尝试过 react-forms,但是当我运行 babel 时他会出错,因为我使用的是 babel 6,而 react-forms 使用的是旧的 babel 5 函数。

有什么想法吗?

【问题讨论】:

  • 最好的是redux-form。尝试不解析您的 node_modules 库。无论您是否使用 babel,该库都是不可知的。
  • redux-form 可以在没有 redux 的情况下工作吗?因为我在我的应用程序中使用了通量。
  • 嗯,对不起,我以为你在使用 redux。有一个 formsy-react 但没有与 redux-form 相比。我最近需要在没有 redux 层的情况下管理复杂的表单,我使用了 redux-form 的核心并制作了自己的层。这很难,但对我来说效果很好。
  • 我也选择了redux-from。这个示例项目对我很有帮助github.com/tb/rmwl_client/blob/master/src/containers/product/…
  • 这里是一个不需要 Redux 的表单验证库:github.com/tkrotoff/react-form-with-constraints

标签: forms reactjs flux


【解决方案1】:

试试 React-Reactive-Forms,一个完美的基于 Angular 的响应式表单的 react 表单管理库。

一些很酷的功能是:

  • 零依赖
  • 嵌套表单
  • 内置验证器
  • 轻松动态地操作表单控件。
  • 大型表单的高性能

中篇:https://medium.com/@kuldepsaxena155/introducing-reactive-forms-in-react-e6df0b84a1ea

回购链接:https://github.com/bietkul/react-reactive-form

【讨论】:

    【解决方案2】:

    您还可以查看react-form,它是处理表单的绝佳工具。它是轻量级的,API 非常简单但也可扩展。

    不过有一些警告,我在这里写了一篇关于此的 Medium 文章:https://medium.com/doctolib-engineering/treating-technical-debt-62630ee64ef7

    【讨论】:

      【解决方案3】:

      结帐powerform。它是一个与框架无关的包。 它很小,简单且非常明确。 它提供的基本 api 可以组合成满足人们可以想象的任何复杂的形式要求。

      查看 React 演示 here

      【讨论】:

        【解决方案4】:

        叶子验证器

        https://www.npmjs.com/package/leaf-validator

        声明式解决方案

        • 状态管理
        • 验证
        • 向后兼容以前的表单模型
        • 模型差异(因此您可以选择将表单模型更改的差异而不是整个模型发送到服务器)

        自然支持嵌套表单,因为此包的所有功能都以声明方式支持任何形状的表单模型。这对于验证和与服务器 API 的向后兼容性(对于零停机时间部署等)尤其重要。

        【讨论】:

          猜你喜欢
          • 2020-04-05
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          • 2010-09-09
          • 2010-09-09
          • 1970-01-01
          相关资源
          最近更新 更多