Stores for reusable React+Flux form component（一个组件用于多个不同字段的表单）

Question

在我正在处理的应用程序中，我有几个不同字段的不同表单。我想为每个表单创建一个可重用的组件。

表格 #1 可能包含以下字段：电子邮件、密码
表单 #2 可以包含以下字段：移动消息、平板消息、桌面消息、背景颜色、文本颜色

对于这个例子——假设我使用的是表格 #1；这是我针对该用例的代码：

var LoginForm = React.createClass({
    handleSubmit: function(){
        var formValues = {
            username: '',
            password: '',
            url:      '/api/login/'
        };

        // Submit form, whee!
        FormActions.submit(formValues);
    },
    render: function(){
        var formSections = [
            {
                name: 'Sign in here',
                fields: [
                    {
                        name: 'username',
                        label: 'Username',
                        type: 'text'
                    },
                    {
                        name: 'password',
                        label: 'Password',
                        type: 'password'
                    }
                ]
            }
        ];
        return (
            <FormComponent sections={formSections} handleSubmit={this.handleSubmit} />
        );
    }
});

所以，我希望能够向我的 FormComponent 传递一个数组，其中包含包含字段的表单部分。表单部分的示例包括：个人信息、送货地址、账单明细。

我想弄清楚的是，如何生成一个 'general' Flux 存储来处理我输入的任何表单字段。例如，在我的 formSections 数组中，我希望能够传递不同的字段并仍然利用 Flux 架构。

我不确定我是否在使用这种模式时犯了错误；我应该为我将使用的每种类型的表单创建一组不同的操作、常量、存储等吗？或者创建一个能够在单个 FormComponentStore 商店中处理不同字段的表单组件是一种可靠的做法吗？

Answer 1

我不能发表评论，所以我必须回答，但这确实是一个简单的问题。为什么你想要 FormStores？提交表单不应该创建域实体，然后将该实体保存到 EntityXStore？

例如，我从一个简单的 Flux 应用程序开始，我也有一个 LoginForm，但我有一个 UserStore，用于在登录成功时存储（或不存储）用户。

除非在您的具体情况下保存已完成的表格有意义，因此我说这是一个问题。

对不起英语！

Answer 2

我已经在 React/Flux 中实现了类似的功能，并且对结果非常满意，尽管它可能有点过于专业，您无法整体使用。我将运行简要介绍活动部分，您可以决定是否喜欢该方法，以及哪些部分可能适合您的需要。基本思想是能够生成表单 DOM 以及它需要从配置的 blob 与我的 API 的不同部分进行通信的行为。首先，这是我如何实例化 BasicAPIForm，它是由 Flux "FormStore":

支持的有状态组件

见code:

render: function(){
  var formProps = {
    formId: "uniqueFormId1",
    fieldsMeta: {
      name: {inputType: "text", label: "Name", required: true},
      description: {inputType: "textarea", label: "Description", required: true},
      url: {inputType: "text", label: "Website URL", required: true},
      email: {inputType: "text", label: "Contact Email", required: true},
      image: {inputType: "image", label: "Logo", required: false, filename: "logo.png"}
    },
    defaultValues: {
      name: "",
      description: "",
      url: "",
      email: "",
      image: null,

      imageData: null,
      actionState: "ready",
      message: ""
    },
    columns: [
      { fields: ['image'], className:'col-xs-5 col-sm-4 col-md-3' },
      { fields: ['name', 'description', 'url', 'email'], className:'col-xs-7 col-sm-8 col-md-9' }
    ],
    apiContext: {
      formId: this.props.type,
      apiCollectionKey: "theRightCollection",
      actionUrl: "/v1/resource/items",
      method: "POST",
      successHttpStatus: [201],
      successMessage: "New resource created"
    }
  };
  FormStore.getOrInitFormData(this.props.type, formProps);

  return (
    <div className="active-panel api-form image-upload-form clearfix">
      <div className="container-fluid">
        <BasicAPIForm {...formProps} />
      </div>
    </div>
  );
}

BasicAPIForm 组件需要一个唯一的 formId，它可以理解的字段列表（例如，图片上传字段需要像 filename 这样的道具），一些初始状态 (defaultValues)，一些关于如何将字段分组到列中的配置，然后是一个类似的 API 配置对象，帮助 APIStore 构造一个 API 请求和处理响应。 BasicAPIForm 是一个复杂的组件，具有很多行为，正如我已经实现的那样。对于每种不同类型的输入（如 'image'），我必须创建一个组件。在 BasicAPIForm 的 render() 方法中，它基本上遍历列，根据配置和当前状态呈现每个列中的字段。这是一个 "managed" 表单，因此每次更改 DOM 输入时，它都会更新自己的状态并与 FormStore 同步。

在调用 FormStore.getOrInitFormData(this.props.type, formProps) 中看到的 FormStore 与应用程序上所有活动表单的状态保持同步。这可能不需要；您可以将所有状态保留在组件中。

我们实现中的 APIStore 负责管理前端应用程序已知的数据并与服务器通信以获取或 post 需要的数据。 APIStore 侦听表单 POST 操作，从 FormStore 获取相关输入和 API 配置，向 API 发送请求，存储结果，并创建成功或FormStore（和 Form 组件）可以用来显示结果的完成失败操作。

在我们的 FormStore 实现中，当 BasicAPIForm 上发生状态更改时，FormStore 中的表示会被修补。为不同的表单存储不同的数据没有障碍，只要数据基本上看起来像一个 JSON {} 对象并且表单有一个唯一的键，该键随所有对 FormStore 的调用传递。起初，我将默认值和类型存储在 Store 中，但扩展性不佳，因此我将其移至上面的这个大配置 blob，它可以非常接近相关的渲染代码。未来肯定会有一些重大的变化。

这种方法在我们的项目中不断发展。到目前为止，第一次构建花费了很长时间，但每次后续重构和添加新表单所花费的时间越来越少，因此总体而言，它似乎越来越有成效。这证明在表格中加入高度的交互性和润色是合理的。

Stores for reusable React+Flux form component（一个组件用于多个不同字段的表单）

Stores for reusable React+Flux form component (one component for multiple forms with different fields)

javascript

flux

reactjs

reactjs-flux