方式一:
当前列表实现调用公共list组件,将分页pageSize,pageNo的值从子组件传到父组件。分页的传参如下所示。
当前页的调用:
// 父组件的调用子组件
handleChangePage = query => {
const { defaultQuery } = this.state;
this.props.getList(defaultQuery);
this.setState({
pageNum: query,
});
};
handleShowSizeChange = query => {
const { defaultQuery } = this.state;
this.props.getList(defaultQuery);
this.setState({
pageNum: query.current,
pageSize: query.size,
});
};
const listProps = {
columnsData: this.getColumns(),
list: _.get(list, 'value.data') || [],
total: _.get(list, 'value.total'),
location: location.pathname,
enableRowSelection: true,
page: pageNum || 1,
pageSize: pageSize || 10,
sizeOptions: ['10', '20', '50', '100'],
getSelectedData: this.getSelectedData,
onChangePage: this.handleChangePage,
onChangePageSize: this.handleShowSizeChange,
};
子组件里面传参:
onPageNoChange = page => {
const { onChangePage } = this.props; // 父传子的方法
if (onChangePage) {
onChangePage(page); // 将子组件的参数传回父组件
}
this.setState({
pageNo: page,
});
};
onShowSizeChange = (current, size) => {
const { onChangePageSize } = this.props; // 父传子的方法
if (onChangePageSize) {
onChangePageSize({ current, size });// 将子组件的参数传回父组件
}
this.setState({
pageSize: size,
});
};
方式二:
同样是从子组件向父组件传参,传参的方式与第一种有所区别。是将子组件this的所有属性和方法都传回父组件,在父组件调用子组件的方法获取子组件页面的数据。
父组件调用子组件:
// 提交的方法
handleSubmitApproval = tableList => {
const { submitApproval } = this.props;
// 从回调函数中返回的this.swiftTemplateValue,直接调用该返回的handleSave方法获取参数。
const fieldCurrent = this.swiftTemplateValue.handleSave();
submitApproval(fieldCurrent );
};
getSwiftTemplateValue = ref => {
if (ref) {
this.swiftTemplateValue = ref;
}
};
// 调用子组件
<NewSwiftTemplate
key={modelId}
messageTypeValue={this.state.messageTypeValue}
templateName={this.state.templateName}
isAddOrEditValue={isAddOrEdit}
getSwiftTemplateValue={this.getSwiftTemplateValue} // 回调函数
/>
子组件调用父组件的方法:
componentDidMount() {
const { getSwiftTemplateValue } = this.props;
// 调用父组件的方法,并把子组件的this所有属性和方法返回子组件
if (getSwiftTemplateValue) {
getSwiftTemplateValue(this);
}
}
componentWillReceiveProps(nextProps) {
const { getSwiftTemplateValue } = this.props;
// 调用父组件的方法,并把子组件的this所有属性和方法返回子组件
if (getSwiftTemplateValue) {
getSwiftTemplateValue(this);
}
}
// handleSave方法获取子组件的表单字段数据