使用redux-form如何处理来自父提交的多个表单值

如何解决使用redux-form如何处理来自父提交的多个表单值

我的上级组件具有几个不同的选项卡。 每个选项卡都包含一个表单。 我需要通过1从父组件提交点击来处理所有表单值。

我设法使其按预期工作，但它会在每个输入上重新呈现整个组件。

我该如何在每次输入更改时降低rerenderint父组件。

如何仅在handleSubmit函数上获取所有表单值？

这里是一个例子：

import React,{ Component } from 'react';
import { Row,Col,Nav,NavItem,Tab } from 'react-bootstrap';
import Button from 'react-bootstrap/lib/Button';

class Project extends Component {
  //constructor and life cycle here

  handleSubmit = () => {
    //here i need to get all forms values and forms validation without re rendering the whole component on each input change
  };

  render() {
    return (
      <div>
        <Tab.Container>
          <Row className="clearfix">
            <Col sm={3}>
              <Nav bsstyle="pills" stacked className="side-tabs">
                <NavItem eventKey="item1"> form1 </NavItem>
                <NavItem eventKey="item2"> form2 </NavItem>
                <NavItem eventKey="item3"> form3 </NavItem>
                <NavItem eventKey="item4"> form4 </NavItem>
              </Nav>
            </Col>
            <Col sm={9}>
              <Tab.Content animation={false}>
                <Tab.Pane eventKey="item1">
                  <FormComponent1 onSubmit={() => {}} />
                </Tab.Pane>
                <Tab.Pane eventKey="item2">
                  <FormComponent2 onSubmit={() => {}} />
                </Tab.Pane>
                <Tab.Pane eventKey="item3">
                  <FormComponent3 onSubmit={() => {}} />
                </Tab.Pane>
                <Tab.Pane eventKey="item4">
                  <FormComponent4 onSubmit={() => {}} />
                </Tab.Pane>
              </Tab.Content>
            </Col>
          </Row>
        </Tab.Container>
        <Row>
          <Col sm={12}>
            <Button type="submit" onClick={this.handleSubmit}>
              Submit
            </Button>
          </Col>
        </Row>
      </div>
    );
  }
}

const mapStatetoProps = state => {
  return {
    error: state.projects.error || state.projects.error,loading: !!state.projects.loading && state.projects.loading,// here is my way how i did this,BUT this cause whole component to rerender on each input change
    // this is huge performance issue
    form1: getFormValues('form1')(state),form2: getFormValues('form2')(state),form3: getFormValues('form3')(state),form4: getFormValues('form4')(state),isValidform1: isValid('form1')(state),isValidform2: isValid('form2')(state),isValidform3: isValid('form3')(state),isValidform4r: isValid('form4')(state),isDirtyform1: isDirty('form1')(state),isDirtyform2: isDirty('form2')(state),isDirtyform3: isDirty('form3')(state),isDirtyform4: isDirty('form4')(state),};
};

const mapdispatchToProps = dispatch => {
  return {
    //some api function here
  };
};

export default connect(mapStatetoProps,mapdispatchToProps)(Project);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>