其实就是父组件将父组件的函数(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;