react 组件连动效果_封装react组件——三级联动

import React from 'react';

import DropDownMenu from 'material-ui/DropDownMenu';

import MenuItem from 'material-ui/MenuItem';

import { provinces, cities, counties } from './provinceData';

class ProvinceSelect extends React.PureComponent {

constructor(props) {

super(props);

this.state = {

provinceValue: '安徽省',

provinceIndex: 0,

cityValue: '合肥市',

cityIndex: 0,

countyValue: '瑶海区',

countyIndex: 0,

};

}

handleChangeProvince = (event, index, value) =>

this.setState({

provinceIndex: index,

provinceValue: value,

cityValue: cities[index][0],

countyValue: counties[index][0][0],

});

handleChangeCity = (event, index, value) =>

this.setState({

cityIndex: index,

cityValue: value,

countyValue: counties[this.state.provinceIndex][index][0],

});

handleChangeCounty = (event, index, value) => this.setState({ countyIndex: index, countyValue: value });

render() {

const { provinceValue, provinceIndex, cityValue, cityIndex, countyValue } = this.state;

return (

{provinces.map((item, index) => (

))}

{cities[provinceIndex].map((item, index) => (

))}

{counties[provinceIndex][cityIndex].map((item, index) => (

))}

);

}

}

export default ProvinceSelect;