Question

我有表格。这个表单有很多输入元素。用户与表单的交互：用户首先从multiselect中选择一个产品（最多可以选择32个产品）。根据所选产品，我们会显示其他用户必须填写的表单元素。特定产品的输入字段可以主要分为3类。

公司相关领域:(公司选择组件）谁是买家？等
其他字段:(单选按钮，复选框，文本，日期等）买家是否有足够的钱购买？等
特殊其他字段：这些字段与其他字段相同，但他们的答案可以在表单中添加更多产品，这样可以添加更多输入字段。例如。 如果买家的回答有足够的钱购买是。然后你可能会问另一个问题，例如如果买家没有钱那么你认为我们应该还包括产品2，这是为买家购买这种商品筹集资金。

在该用户填写一些常见字段后，这些字段与特定产品无关。根据给出的模拟，整个表格分为多个手风琴。请参阅附件截图。注意：

支持此表单的模型如下所示:(整个表单的一个模型）

表格： { 买家： [ { 姓名：＆＃34; Abc＆＃34;， Id：1234 }， ] 卖家： [ { 姓名：＆＃34; Abc＆＃34;， Id：1234 }， ] 钱：＆＃34;＆＃34;，问题1：＆＃34;＆＃34;，问题2：＆＃34;＆＃34;， }

应将常见的公司相关问题归为一类。例如。说产品1有一个问题叫做“谁是买家”，产品2也有一个问题叫做“谁是买家”，如果用户同时选择了两个产品，那么带有名称的问题买家不应该多于一次
需要验证表单的验证，例如“必需”，“最小长度”和任何其他自定义验证。
当用户点击页面底部的提交按钮时，将保存数据模型json（第1点）。

我的问题：

可扩展：如何构建表单以便添加/更新更多内容形式部分以后不是一种痛苦。这也需要照顾表单元素的自定义事件处理。（添加其他产品根据问题的答案是一个例子）
性能：如何设计此表单以便快速加载，即使用户添加了5个以上的产品。
可维护性：另一个最重要的方面是可读性;它不应该成为团队中新开发人员的一大块元素害怕感动。

高级设计/架构将非常有用。

我正在考虑使用的技术堆栈： React和Redux

Answer 1

您可以使用 React + Redux + Webpack

视频：Click here to watch React + Redux + Webpack videos

您必须在商店内创建模型（数据）和组件可见性标志（componentToLoad），如：

store={
    data:{
        Buyer:'xxx',
        Seller:'xxx',
        etc,
    },
    componentToLoad:{
        LoadBuyerComponent:true,
        LoadSellerComponent:false,
        etc,
    }
}

为买家，卖家等创建不同的组件

class Buyer extends Component {
    render() {
        return (
          //HTML Code
          <div>        
          </div>
     )
}

class Seller extends Component {
    render() {
        return (
          //HTML Code
          <div>        
          </div>
     )
}

您可以根据商店

动态加载组件

class MainForm extends Component {
    render() {
        var components = [];
        if(this.props.componentToLoad.LoadBuyerComponent == true)
            components.push(<Buyer/>)
        if(this.props.componentToLoad.LoadSellerComponent == true)
            components.push(<Seller/>)
        return (
          <div>      
              {components}  
          </div>
     )
}

如何在react redux

1 个答案: