主页 / 问题 / 857342
Accepted
tym32167
Asked:2020-07-19 02:56:11 +0800 CST2020-07-19 02:56:11 +0800 CST

使用 React 构建复杂的复合形状

  • 772

我面临着使用 React-Redux 实现具有复杂表单的 SPA 的任务。由于我从未做过前端开发人员，所以我开始阅读文档，为应用程序制作了一些基本模板，然后开始实际实现表单。

应用的方案如下：顶层组件从服务端加载一个大的json对象到内存中。大 - 这意味着具有大量字段的对象。传统上，所有领域都被划分为多个部分。

每个部分都可以包含简单的输入字段和表格、开关等，包括只读字段。

最好自己生成字段及其样式，因为有企业样式和本地已编写的控件。

此外，字段可以相互依赖，字段验证可以依赖于其他字段的值，依赖字段可以来自不同的部分，等等。一般来说，一切皆有可能。

为了显示和验证字段，可以向服务器请求（例如，对于下拉数据或检查部分/字段的有效性）。

示意图如下所示：

| секция 1| набор полей 1 |
|--------:|--------------:|
| секция 2| набор полей 2 |
| секция 3| набор полей 3 |
| секция N| набор полей N |
|         |Кнопки действий|

基本上有2个问题：

一）Какой предпочтительный метод для управления состоянием формы и модели данных?

这样，原则上存在问题，但可以解决。据我了解，我有 2 个选项 - 将状态存储在存储中（存储 - 我使用 Redux），或者将状态的一部分存储在组件中，并在每次尝试完成表单编辑然后更新时收集此状态店铺。

根据我在网上和手册上的了解，每次打喷嚏都更新 STATUS 不值得做 ACTIONS，因为有很多控件可供编辑，而且我还需要将更新后的模型上传到存储库，其中有已经验证并保存在服务器上。

因此，现在，我有一个想法将每个部分划分为一个组件，为每个部分组件提供整个模型以及用于验证和更新模型的回调 + 组件应该有一个方法，允许层次结构中较高的组件了解是否正在验证视图的当前状态。

2)Какой предпочтительный способ генерации всех этих контролов на форме, добавления туда бизнес правил и правил валидации?

这更加困难。我查看了推荐的选项，redux-form，react-form，再一次react-form， react-redux-form， 不是很流行的选项等等，我无法选择，但也理解了普遍接受的构建方法复杂的级联形式。2-3 个字段的示例中的每一件事似乎都可以接受，但是当我想象我的字段数时，我明白我会淹没在事件处理程序和魔术函数中。Отсюда вопрос - есть ли общепринятый, обкатанный способ реализации подобных нужной мне форм?

javascript

1 个回答

  1. Best Answer

    您已经将表格分成了多个部分，所以就这样做吧。同样redux-form，您可以创建多个可以连接到单个组件的表单。字段本身通过 连接，您可以在其中设置Field验证

    最好自己生成字段及其样式，因为有企业样式和本地已编写的控件。

    Bredux-form Field可以将函数作为道具并渲染您的自定义组件。在那里，您可以做任何您想做的事情，不仅可以使用样式，还可以使用验证、值格式化等。

    为了显示和验证字段，可以向服务器请求（例如，对于下拉数据或检查部分/字段的有效性）。

    我们redux-form有一个设置asyncValidate，因此您可以向服务器发送请求并获取验证状态。

    但是当我想象我的字段数量时，我明白我会淹没在事件处理程序和魔术函数中

    如果你有一个复杂的更改字段的逻辑，那么无论如何你都会把它写下来，没有库会拯救你，否则实际上只是在 store( value => dispatch({value})) 中抛出值的“魔术函数”将为你做所有事情

    • 2

相关问题