Antd Tabs 当前页面来回切换 表单数据不清空（或者清空）

清空表单的办法是this.props.form.resetFields();

但是本篇文章主要讲解不清空

灵活使用 display:none 就可以避免切换的时候表单数据被setState重新渲染清空掉  （即切换tab项，不清空表单）

 

{/* 查询区域 */}

        <div className="search-form-area">

          {

            <div style={{ display: activeKey === '1' ? 'block' : 'none' }}><SearchFieldForm // 项目角度

              ref={(form) => this.ProjSearchForm = form}

              submitFuc={this.getProjPage}

              fieldsData={projSearchData}

              colNum={4}

              diyItemLayout={{ labelCol: { span: 4 }, wrapperCol: { span: 17 } }}

            // moreSearchData={moreSearchData}

            /></div>

          }

          {

            <div style={{ display: activeKey === '2' ? 'block' : 'none' }}>< SearchFieldForm // 产品角度

              ref={(form) => this.PrdSearchForm = form}

              submitFuc={this.getProjPage}

              fieldsData={prdSearchData}

              colNum={4}

              diyItemLayout={{ labelCol: { span: 4 }, wrapperCol: { span: 17 } }}

            /></div>

          }

        </div>

 {/* 列表区域 */}

        <div style={{ height: tableHeight + 100 }} className='myProjTable'>

          <Tabs defaultActiveKey="1" onChange={this.handleTabsChange}>

            <TabPane tab="项目角度" key="1" style={{ backgroundColor: '#fff' }}>

              <CustomTable

                rowKey='projId'

                size="small"

                style={{ height: tableHeight }}

                columns={columns}

                tableData={projTableData}

                expandedRowRender={this.expandedRowRender}

                pagination={pagination}

                handleTableChange={this.handleTableChange}

                scroll={{ y: tableScrollHeight, x: 1660 }}

                tableRowSelection={this.tableRowSelection}

              />

            </TabPane>

            <TabPane tab="产品角度" key="2" style={{ backgroundColor: '#fff' }}>

              <CustomTable

                rowKey="projId"

                size="small"

                style={{ height: tableHeight }}

                columns={columnsPrd}

                tableData={prdTableData}

                handleTableChange={this.handleTableChange}

                pagination={pagination}

                scroll={{ y: tableScrollHeight, x: 1800 }}

                tableRowSelection={this.tableRowSelection}

              />

            </TabPane>

          </Tabs>

        </div>