React 父子组件之间传值

父组件（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 >)

}

}