react 子组件回调父组件函数

其实就是父组件将父组件的函数（key：changeState，value：goToBPMS函数）传递给子组件，子组件从props中调用key为changeState的函数，父组件的goToBPMS函数就会调用。

子组件：

import React, { Component } from 'react';
import { Button } from 'antd';
import { connect } from 'dva';

let hide = false;
@connect(state => ({
  user: state.user,
}))
export default class BaseButton extends Component {
  state = {
    type: this.props.type,
    text: this.props.text,
  };
  componentDidMount() {
    xxxxx
  }
  
  // 回调父组件的函数去修改父组件的数据
  click() {
    this.props.changeState();
  }

  render() {
    return (
      <Button
        type="primary"
        htmlType="submit"
        style={{ height: '30px', width: '100px' }}
        onClick={this.click.bind(this)}
      >
        {this.state.text}
      </Button>
    );
  }
}

父组件使用子组件：

import React, { Component } from 'react';
import { connect } from 'dva';
import BaseButton from './component/BaseButton';
import { INTEGRATION_NEXT_BUT_TEXT } from '../../constants/project';


class ProjectCheck extends Component {
  state = {
   
  };

 

  componentDidMount() {
    this.getDetail();
  }
    // 父组件被子组件回调的函数在这里～～
  goToBPMS() {
   
  }

  // 获取页面底部button状态
  getFooterButton() {
    return (
      <Row>
        <Col span={2}>
          <BaseButton
            text={INTEGRATION_NEXT_BUT_TEXT.text}
            changeState={this.goToBPMS.bind(this)}
            extraInfo={{ disable: hideButton }}
          />
        </Col>
      </Row>
    );
  }

  /**
   * @Description:渲染页面
   */
  render() {
    
    return (
      <div>
        <Form>
          <FormItem
            {...styles.tailFormItemLayout}
          >
            {this.getFooterButton()}
          </FormItem>
        </Form>
      </div>
    );
  }
}

const ProjectCheckWrapper = Form.create()(ProjectCheck);
export default ProjectCheckWrapper;