react循环搜索字段模板

  getFields() {
    const count = this.state.expand ? 10 : 6;
    const { getFieldDecorator } = this.props.form;
    const children = [];
    //默认type 1 input 2 select

    const textInput=[{ 
        name:"客户编号",
        type:1,
        filed:"dealerNum"
    },{
        name:"用户名",
        type:1,
        filed:"dealerAccount"
        
    },{
        name:"客户名称",
        type:1,
        filed:"dealerName"
    },
    {
        name:"联系人",
        type:1,
        filed:"contactsName"
    },
    {
        name:"有效状态",
        type:2,
        filed:"flage",
        option:[{
            label:"请选择",
            value:""
        },
        {
            label:"停用",
            value:"N"
        },{
            label:"启用",
            value:"Y"
        }
       ]

    },
    {
        name:"申请时间",
        type:3,
        filed:"time"
    }
    ]
    for (let i = 0; i < textInput.length; i++) {
        if(textInput[i]["type"]===1){
      children.push(
        <Col span={4} key={i} style={{ display: i < count ? 'block' : 'none' }}>
          <Form.Item label={textInput[i]["name"]}>
            {getFieldDecorator(textInput[i]["filed"],{
                initialValue:"",
                rules:[]
            })( <Input placeholder="请输入" />)
            }
           
          </Form.Item>
        </Col>,
      );
     }else if(textInput[i]["type"]===2){
        children.push(
            <Col span={4} key={i}>
            <Form.Item label={textInput[i]["name"]}>
           { getFieldDecorator(textInput[i]["filed"],{
               initialValue:"",
               rules:[]
           })(<Select>
           {
               textInput[i]["option"].map(item=>(
                <Option key={item["value"]} value={item["value"]}>{item["label"]}</Option>
               ))
           } 
             
         </Select>)
        
           }
            </Form.Item>
          </Col>
          );
     }else if(textInput[i]["type"]===3){
        children.push(
            <Col span={4} key={i} style={{ display: i < count ? 'block' : 'none' }}>
              <Form.Item label={textInput[i]["name"]}>
                {getFieldDecorator(textInput[i]["filed"],{
                    defaultValue:moment(),
                    rules:[]
                })( <RangePicker placeholder="请选择时间" format="YYYY-MM-DD"  onChange={this.change.bind(this,textInput[i]["filed"])} />)
                }
               
              </Form.Item>
            </Col>,
          );
     }

    }
   
    return children;
  }


render(){
return(
 <div className="audit">
                          <div className="main-header">
                                <Form className="ant-advanced-search-form" onSubmit={this.handleSearch}>
                                    <Row gutter={24}>{this.getFields()}</Row>
                                    <Row>
                                    <Col span={24} style={{ textAlign: 'right' }}>
                                        <Button type="primary" htmlType="submit">
                                        搜索
                                        </Button>
                                        <Button style={{ marginLeft: 8 }} onClick={this.handleReset}>
                                        清空
                                        </Button>
                                        <a style={{ "marginLeft": 8, "fontSize": 12 }} onClick={this.toggle} href="javascrript:;">
                                        展开 <Icon type={this.state.expand ? 'up' : 'down'} />
                                        </a>
                                    </Col>
                                    </Row>
                                </Form>
                                <style>
                                        {
                                            ` .ant-advanced-search-form {
                                                padding: 24px;
                                                background: #fbfbfb;
                                                border: 1px solid #d9d9d9;
                                                border-radius: 6px;
                                                }
                                
                                                .ant-advanced-search-form .ant-form-item {
                                                display: flex;
                                                }
                                                .ant-tabs.ant-tabs-card > .ant-tabs-bar .ant-tabs-tab{
                                                    background:#eee;
                                                }
                                                .ant-tabs.ant-tabs-card > .ant-tabs-bar .ant-tabs-tab-active{
                                                  background:#fff;
                                                }
                                                .ant-advanced-search-form .ant-form-item-control-wrapper {
                                                flex: 1;
                                                }`
                                            }
                                    </style>
                            </div>
                        </div>

)
}

Links: 375