父组件（OrgManage）=> 子组件（LocationFilter）
export
class
OrgManage
extends
React.
Component {//父组件
render() {
return (
<
LocationFilter
provinceID=
{this.
props.
match.
params.
provinceID
}//里面放你要传的值
cityID=
{this.
props.
match.
params.
cityID
}
districtID=
{this.
props.
match.
params.
districtID
}
>
</
LocationFilter
>
)
}
}
export
class
LocationFilter
extends
React.
Component {//子组件
componentDidMount() {
var provinceID = this.
props.
provinceID;
var cityID= this.
props.
cityID;
var districtID= this.
props.
districtID;
}
render() {
return (
)
}
}
子组件（LocationFilter）=> 父组件（OrgManage）
export class LocationFilter extends React.Component {//子组件
componentDidMount() {
var provinceID = this.
props.
provinceID;
var cityID= this.
props.
cityID;
var districtID= this.
props.
districtID;
//子组件向父组件传值的回调方法
this.
props.
callbackParent(
provinceID,
cityID,
districtID);
}
render() {
return (
)
}
}
export
class
OrgManage
extends
React.
Component {//父组件
constructor(
props) {
super(
props);
this.
state = {
data: [],
total:
0,
loading:
false,
disableID:
0,
statusName:
"",
disInfo:
""
}
this.callbackParent = this.callbackParent.bind(this);
}
callbackParent(
provinceID,
cityID,
districtID) {
this.
props.
match.
params.
provinceID =
provinceID;
this.
props.
match.
params.
cityID =
cityID;
this.
props.
match.
params.
districtID =
districtID;
this.
props.
history.
push({
pathname:
"/layout/org/list/" +
provinceID +
"/" +
cityID +
"/" +
districtID +
"/" +
1 });
}
render() {
return (
<
LocationFilter
callbackParent=
{this.
callbackParent
}
provinceID=
{this.
props.
match.
params.
provinceID
}
cityID=
{this.
props.
match.
params.
cityID
}
districtID=
{this.
props.
match.
params.
districtID
}
>
</
LocationFilter
>
)
}
}
下面是上面两页的完整代码
import
React
from
'react';
import {
Link }
from
'react-router-dom';
import {
Redirect }
from
'react-router';
import {
Layout,
Table,
Divider,
Button,
Popconfirm,
message }
from
'antd';
import {
LocationFilter }
from
'../../filter/district';
import {
TableColumn }
from
'../../../models/table';
import {
insList,
disableOrg }
from
'../../../services/user/ins';
const {
Content } =
Layout;
/**
* callbackParent:省市区组件向父组件传值回调方法
*
@param
{int,string}
provinceID
省ID
*
@param
{int,string}
cityID
市ID
*
@param
{int,string}
districtID
县区ID
*/
export
class
OrgManage
extends
React.
Component {
constructor(
props) {
super(
props);
this.
state = {
data: [],
total:
0,
loading:
false,
disableID:
0,
statusName:
"",
disInfo:
""
}
this.
callbackParent =
this.
callbackParent.
bind(
this);
this.
onPageChange =
this.
onPageChange.
bind(
this);
this.
columns = [
new
TableColumn(
'编号',
'Index',
'Index'),
new
TableColumn(
'机构ID',
'ID',
'ID'),
new
TableColumn(
'机构名称',
'Name',
'Name'),
new
TableColumn(
'联系电话',
'Phone',
'Phone'),
new
TableColumn(
'状态',
'statusName',
'Status'),
new
TableColumn(
'操作',
'action',
'', (
text,
record)
=> (
<
span
>
<
Link
to=
{
`/layout/org/create/
${
record.
ID
}
?page=` +
this.
props.
match.
params.
page
}
>编辑
</
Link
>
<
Divider
type=
"vertical"
/>
<
Popconfirm
placement=
"topLeft"
title=
{
record.
disInfo
}
onConfirm=
{()
=>
this.
onDisable(
record.
ID,
record.
Status)
}
okText=
"确定"
cancelText=
"取消"
>
<
a
href=
"#"
>
{
record.
statusSwitch
}
</
a
>
</
Popconfirm
>
</
span
>
))
];
}
componentDidMount() {
this.
insList(
this.
props.
match.
params.
page,
this.
props.
match.
params.
provinceID,
this.
props.
match.
params.
cityID,
this.
props.
match.
params.
districtID);
}
componentWillReceiveProps(
nextProps) {
this.
insList(
nextProps.
match.
params.
page,
this.
props.
match.
params.
provinceID,
this.
props.
match.
params.
cityID,
this.
props.
match.
params.
districtID);
}
callbackParent(
provinceID,
cityID,
districtID) {
this.
props.
match.
params.
provinceID =
provinceID;
this.
props.
match.
params.
cityID =
cityID;
this.
props.
match.
params.
districtID =
districtID;
this.
props.
history.
push({
pathname:
"/layout/org/list/" +
provinceID +
"/" +
cityID +
"/" +
districtID +
"/" +
1 });
}
onPageChange(
page,
pagesize) {
this.
props.
history.
push({
pathname:
"/layout/org/list/" +
this.
props.
match.
params.
provinceID +
"/" +
this.
props.
match.
params.
cityID +
"/" +
this.
props.
match.
params.
districtID +
"/" +
page });
}
onDisable(
orgID,
status) {
if (
status ==
1) {
status =
2;
}
else {
status =
1;
}
disableOrg(
orgID,
status).
then((
data)
=> {
message.
success(
"机构账号状态修改成功!");
this.
refreshData();
});
}
refreshData() {
this.
insList(
this.
props.
match.
params.
page,
this.
props.
match.
params.
provinceID,
this.
props.
match.
params.
cityID,
this.
props.
match.
params.
districtID);
}
insList(
page,
provinceId,
cityId,
districtId) {
if (!
page) {
return;
}
this.
setState({
loading:
true });
insList(
page,
provinceId,
cityId,
districtId).
then((
data)
=> {
for (
var
i =
1;
i <
data.
Info.
length +
1;
i++) {
if (
data.
Info[
i -
1].
Status ==
1) {
data.
Info[
i -
1].
statusName =
"有效";
data.
Info[
i -
1].
statusSwitch =
"禁用";
data.
Info[
i -
1].
disInfo =
"确定要禁用吗？"
}
else {
data.
Info[
i -
1].
statusName =
"禁用";
data.
Info[
i -
1].
statusSwitch =
"启用";
data.
Info[
i -
1].
disInfo =
"确定要启用吗？"
}
data.
Info[
i -
1].
Index = ((
page -
1) *
10 +
i);
}
this.
setState({
total:
data.
Count,
data:
data.
Info,
loading:
false
});
});
}
render() {
if (!
this.
props.
match.
params.
page) {
return
<
Redirect
push
to=
"/layout/org/list/0/0/0/1"
/>;
}
return (
<
Content
style=
{{
margin:
'24px 16px',
padding:
24,
background:
'#fff',
minHeight:
280 }
}
>
<
LocationFilter
callbackParent=
{this.
callbackParent
}
provinceID=
{this.
props.
match.
params.
provinceID
}
cityID=
{this.
props.
match.
params.
cityID
}
districtID=
{this.
props.
match.
params.
districtID
}
>
<
Button
type=
"primary"
size=
"large"
style=
{{
float:
"right" }
}
><
Link
to=
"/layout/org/create"
>添加机构
</
Link
></
Button
>
</
LocationFilter
>
<
div
>
<
Table
columns=
{this.
columns
}
loading=
{this.
state.
loading
}
expandedRowRender=
{
record
=>
<
p
style=
{{
margin:
0 }
}
><
lable
style=
{{
margin:
0 }
}
>
{
"合作时间： " +
record.
CooperationStartTime.
substr(
0,
10) +
"~" +
record.
CooperationEndTime.
substr(
0,
10)
}
</
lable
><
lable
style=
{{
marginLeft:
50 }
}
>
{
"当前用户数量： " +
record.
UserCount
}
</
lable
></
p
>
}
dataSource=
{this.
state.
data
}
pagination=
{{
pageSize:
10,
total:
this.
state.
total,
onChange:
this.
onPageChange,
current: +
this.
props.
match.
params.
page }
}
/>
</
div
>
</
Content
>)
}
}
import
React
from
'react';
import {
Select }
from
'antd';
import {
getProvinces,
getCities,
getDistricts }
from
'../../services/common/location';
const
Option =
Select.
Option;
var
defaultData = {
Name:
"全部",
ID:
0
}
export
class
LocationFilter
extends
React.
Component {
constructor(
props) {
super(
props);
this.
state = {
provinceData: [
defaultData],
provinceName:
"全部",
cityData: [
defaultData],
cityName:
"全部",
districtData: [
defaultData],
districtName:
"全部"
}
this.
onProvinceChange =
this.
onProvinceChange.
bind(
this);
this.
onCityChange =
this.
onCityChange.
bind(
this);
this.
onDistrictChange =
this.
onDistrictChange.
bind(
this);
}
componentDidMount() {
getProvinces().
then((
data)
=> {
this.
setState({
provinceData:
data
});
}).
catch(()
=> {
this.
setState({
provinceData: [
defaultData]
});
});
}
onProvinceChange(
pid) {
var
pname =
"";
this.
state.
provinceData.
forEach((
value)
=> {
if (
value.
ID ===
pid) {
pname =
value.
Name;
return
false;
}
})
this.
setState({
provinceName:
pname,
cityName:
"全部",
districtName:
"全部"
});
if (
pid ==
0) {
this.
props.
callbackParent(
pid,
0,
0);
this.
setState({
cityData: [
defaultData],
districtData: [
defaultData]
});
}
else {
getCities(
pid).
then((
data)
=> {
this.
setState({
cityData:
data
});
}).
catch(()
=> {
this.
setState({
cityData: [
defaultData]
});
});
this.
props.
callbackParent(
pid,
0,
0);
}
}
onCityChange(
cid) {
var
cname =
"";
this.
state.
cityData.
forEach((
value)
=> {
if (
value.
ID ===
cid) {
cname =
value.
Name;
return
false;
}
})
this.
setState({
cityName:
cname,
districtName:
"全部"
});
if(
cid ==
0){
this.
props.
callbackParent(
this.
props.
provinceID,
cid,
0);
this.
setState({
districtData: [
defaultData]
});
}
else {
getDistricts(
cid).
then((
data)
=> {
this.
setState({
districtData:
data
});
}).
catch(()
=> {
this.
setState({
districtData: [
defaultData]
});
});
this.
props.
callbackParent(
this.
props.
provinceID,
cid,
0);
}
}
onDistrictChange(
did) {
var
dname =
"";
this.
state.
districtData.
forEach((
value)
=> {
if (
value.
ID ===
did) {
dname =
value.
Name;
return
false;
}
});
this.
setState({
districtID:
did,
districtName:
dname
});
this.
props.
callbackParent(
this.
props.
provinceID,
this.
props.
cityID,
did);
}
render() {
var
provinces =
this.
state.
provinceData.
map((
item)
=> {
return
<
Option
key=
{
item.
ID
}
value=
{
item.
ID
}
>
{
item.
Name
}
</
Option
>
});
var
cities =
this.
state.
cityData.
map((
item)
=> {
return
<
Option
key=
{
item.
ID
}
value=
{
item.
ID
}
>
{
item.
Name
}
</
Option
>
});
var
districts =
this.
state.
districtData.
map((
item)
=> {
return
<
Option
key=
{
item.
ID
}
value=
{
item.
ID
}
>
{
item.
Name
}
</
Option
>
})
return (
<
div
style=
{{
marginBottom:
20 }
}
>
<
Select
style=
{{
width:
120,
marginRight:
20
}
}
placeholder=
"选择省份"
onChange=
{this.
onProvinceChange
}
value=
{this.
state.
provinceName
}
>
{
provinces
}
</
Select
>
<
Select
style=
{{
width:
120,
marginRight:
20
}
}
placeholder=
"选择城市"
value=
{this.
state.
cityName
}
onChange=
{this.
onCityChange
}
>
{
cities
}
</
Select
>
<
Select
style=
{{
width:
120,
marginRight:
20
}
}
placeholder=
"选择区县"
value=
{this.
state.
districtName
}
onChange=
{this.
onDistrictChange
}
>
{
districts
}
</
Select
>
{this.
props.
children
}
</
div
>)
}
}