Javascript 存储可重复使用的React+；通量表单组件（一个组件用于具有不同字段的多个表单）

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

• 表单#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} />
        );
    }
});

var LoginForm=React.createClass({
handleSubmit:function（）{
var formValues={
用户名：“”，
密码：“”，
url:“/api/login/”
};
//提交表格，哇！
提交（formValues）；
},
render:function（）{
var formSections=[
{
姓名：'在此处登录'，
字段：[
{
名称：“用户名”，
标签：“用户名”，
键入：“文本”
},
{
名称：“密码”，
标签：“密码”，
键入：“密码”
}
]
}
];
返回(
);
}
});

因此，我希望能够向我的

FormComponent

传递一个数组，该数组包含包含字段的表单节。表格部分的示例包括：个人信息、发货地址、账单详细信息

我想弄明白的是，如何生成一个“通用”通量存储，它将处理我抛出的任何形式的字段。例如，在我的

formSections

数组中，我希望能够通过不同的字段，并且仍然使用Flux架构

---

我不确定的是，我是否在使用这种模式时犯了错误；我应该为我将要使用的每种类型的表单创建一组不同的操作、常量、存储等吗？或者创建一个能够在单个

FormComponentStore

store中处理不同字段的表单组件是一种可靠的做法吗？

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

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

除非在你的特殊情况下，保存完成的表单是有意义的，出于这个原因，我说这是一个问题

---

对不起英语

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

见：

render:function（）{
var formProps={
formId：“独一无二的1”，
菲尔德斯梅塔：{
名称：{inputType:“text”，标签：“name”，必填项：true}，
描述：{inputType:“textarea”，标签：“description”，必填项：true}，
url:{inputType:“text”，标签：“网站url”，必填项：true}，
电子邮件：{inputType:“text”，标签：“联系人电子邮件”，必填项：true}，
图像：{inputType:“图像”，标签：“徽标”，必填项：false，文件名：“Logo.png”}
},
默认值：{
姓名：“，
说明：“，
url:“”，
电邮：“，
图像：空，
imageData:null，
动作状态：“准备好”，
信息：“
},
栏目：[
{字段：['image']，类名：'col-xs-5 col-sm-4 col-md-3'}，
{字段：['name'，'description'，'url'，'email']，类名：'col-xs-7 col-sm-8 col-md-9'}
],
apiContext：{
formId:this.props.type，
apiCollectionKey:“theRightCollection”，
actionUrl:“/v1/resource/items”，
方法：“张贴”，
successHttpStatus:[201]，
成功消息：“已创建新资源”
}
};
FormStore.getOrInitFormData（this.props.type，formProps）；
返回(
);
}

组件需要一个唯一的

formId

，一个它可以理解的字段列表（例如，图像上传字段需要

filename

等道具），一些初始状态（

defaultValues

），一些关于如何将字段分组到列的配置，然后是一个类似的API配置对象，它帮助APIStore构造API请求并处理响应。正如我所实现的那样，BasicAPIForm是一个具有许多行为的复杂组件。对于每种不同类型的输入（如“图像”），我必须创建一个组件。在BasicAPIForm的render（）方法中，它基本上是通过列进行转换，根据配置和当前状态呈现每个列中的字段。这是一个“托管”表单，因此每次更改DOM输入时，它都会更新自己的状态并与FormStore同步

如调用

FormStore.getOrInitFormData（this.props.type，formProps）中所示，

保持与应用程序上所有活动表单的状态同步。这可能是不需要的；您可以将所有状态保留在组件中

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

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>
  );
}