如何在 React Redux 中设计复杂的多组件表单答案

【问题标题】：How to design complex multi component form in react redux如何在 React Redux 中设计复杂的多组件表单
【发布时间】：2017-06-08 04:42:07
【问题描述】：

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

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

用户填写了一些常用字段后，这些字段与特定产品无关。根据给出的模拟，整个表格被分成多个手风琴。请参阅随附的屏幕截图。备注：

支持此表单的模型如下所示：（一个模型用于整个表单）

表格： { 买家： [ { 名称：“ABC”，编号：1234 }, ], 卖家： [ { 名称：“ABC”，编号：1234 }, ], 钱： ””，问题1：“”，问题2 ： ””， }

与公司相关的常见问题应归为一组。例如。假设产品 1 有一个名为“谁是买家”的问题，而产品 2 也有一个名为“谁是买家”的问题，那么如果用户同时选择这两个产品，则名称为“谁是买家”的问题不应显示超过一次.
需要验证表单以进行“必需”、“最小长度”和任何其他自定义验证等验证。
当用户单击页面底部的提交按钮时，将保存数据模型 json（第 1 点）。

我的问题：

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

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

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

【问题讨论】：

您是否尝试过自己做这件事？如果你打算使用 react 和 redux，那么考虑 redux 形式，redux-form.com/6.7.0。

标签： forms reactjs react-redux redux-form react-redux-form

【解决方案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>
     )
}

可以根据store动态加载组件

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

【讨论】：