使用React实现选择城市三级联动组件

以下代码是初期写的代码，后来对代码进行优化，解决了初期的bug。完整的选择城市三级联动组件可以参考我的github项目中的代码，这是后期调试成功上传上去的React选择城市三级联动组件

<SelectArea allAreaInfo={allAreaInfo} province={province}
city={city} district={district}
cancel={this.closeModal} confirm={this.SelectAddress} />

import React, { Component, PropTypes } from 'react';
import { connect } from 'react-redux';
import { Link } from 'react-router';
import rest from '../../lib/rest';const HEIGHT = 36;
export class Picker extends Component {constructor(props) {super(props);this.state = {selectedIndex: this.props.index};this.onScroll = this.onScroll.bind(this);this.resetPosition = this.resetPosition.bind(this);}componentDidMount() {this.refs.scroller.scrollTop = this.state.selectedIndex * HEIGHT;this.refs.scroller.addEventListener('touchstart', this.touchStart, false);this.refs.scroller.addEventListener('touchend', this.touchEnd, false);this.refs.scroller.addEventListener('mousedown', this.touchStart, false);this.refs.scroller.addEventListener('mouseup', this.touchEnd, false);}touchStart() {this.isTouchStart = true;}touchEnd() {this.isTouchStart = false;if (this.timer) clearTimeout(this.timer);this.timer = setTimeout(this.resetPosition, 100);}onScroll() {if (this.timer) clearTimeout(this.timer);this.timer = setTimeout(this.resetPosition, 100);}resetPosition() {let provinceList = [], cityList = [], districtList = [];const { type = '', allAreaInfo = [], callback = () => { } } = this.props;if (this.isTouchStart) return;const top = this.refs.scroller.scrollTop;const distance = top % HEIGHT;let target;if (distance > HEIGHT / 2) {target = top + HEIGHT - distance;this.refs.scroller.scrollTop = target;} else {target = top - distance;this.refs.scroller.scrollTop = target;}const selectedIndex = target / HEIGHT;this.setState({selectedIndex}, () => {callback(type, selectedIndex);});}render() {const { list = [] } = this.props;return (<div className="ul-area" onScroll={this.onScroll} ref="scroller"><ul><li></li>{list.map((item, index) => (<li key={index} className={`${index === this.state.selectedIndex && 'selected'}`}>{item}</li>))}<li></li></ul></div>)}
}class SelectArea extends Component {constructor(props) {super(props);this.state = {provinceList: [],cityList: [],districtList: [],provinceIndex: 0,cityIndex: 0,districtIndex: 0,showPicker: false};this.handleSelect = this.handleSelect.bind(this);}componentDidMount() {const { allAreaInfo = [], province = '', city = '', district = '' } = this.props;let provinceList = [], cityList = [], districtList = [], provinceIndex = 0, cityIndex = 0, districtIndex = 0;if (province) {provinceIndex = allAreaInfo.findIndex(item => item.name === province);cityIndex = allAreaInfo[provinceIndex].city.findIndex(item => item.name === city);districtIndex = allAreaInfo[provinceIndex].city[cityIndex].area.findIndex(item => item === (district || '其他'));this.setState({provinceIndex,cityIndex,districtIndex,showPicker: true});}allAreaInfo.forEach(item => provinceList.push(item.name));if (allAreaInfo[provinceIndex].city.length) {allAreaInfo[provinceIndex].city.forEach(item => cityList.push(item.name));}this.setState({provinceList,cityList,districtList: allAreaInfo[provinceIndex].city[cityIndex] && allAreaInfo[provinceIndex].city[cityIndex].area,showPicker: true});}handleSelect(type, index) {let provinceList = [], cityList = [], districtList = [];const { provinceIndex, cityIndex, districtIndex } = this.state;const { allAreaInfo = [] } = this.props;switch(type) {case 'province':allAreaInfo[index].city.forEach(item => cityList.push(item.name));this.setState({provinceIndex: index,cityList,districtList: allAreaInfo[index].city[0] && allAreaInfo[index].city[0].area});break;case 'city':this.setState({cityIndex: index,districtList: allAreaInfo[provinceIndex].city[index] && allAreaInfo[provinceIndex].city[index].area});break;case 'district':this.setState({districtIndex: index,districtList: allAreaInfo[provinceIndex].city[cityIndex].area});break;default:break;}}render() {const { allAreaInfo = [], cancel = () => {}, confirm = () => {} } = this.props;const { provinceList, cityList, districtList, provinceIndex, cityIndex, districtIndex } = this.state;return (<div id="select-area"><div className="col-xs-12 select-area" onClick={e => e.stopPropagation()}><div className="row border-bottom-grey"><div className="col-xs-6" onClick={cancel}>取消</div><div className="col-xs-6 text-right font-orange"onClick={confirm.bind(null, provinceIndex, cityIndex, districtIndex)}>确定</div></div>{this.state.showPicker && (<div className="row list"><Picker type="province" allAreaInfo={allAreaInfo} list={provinceList} index={this.state.provinceIndex} callback={this.handleSelect} /><Picker type="city" allAreaInfo={allAreaInfo} list={cityList} index={cityIndex} callback={this.handleSelect} /><Picker type="district" allAreaInfo={allAreaInfo} list={districtList} index={districtIndex} callback={this.handleSelect} /></div>)}</div></div>)}
}SelectArea.contextTypes = {router: PropTypes.object.isRequired
};
SelectArea.propTypes = {// test: PropTypes.string.isRequired,
};
export default connect(state => (state))(SelectArea);

使用React实现选择城市三级联动组件相关推荐

vue城市三级联动组件 vue-area-linkage
Install the pkg with npm: // v5之前的版本 npm i --save vue-area-linkage// v5及之后的版本 npm i --save vue-area- ...
uniapp自定义picker城市多级联动组件
uniapp自定义picker城市多级联动组件支持多端--h5.app.微信小程序.支付宝小程序... 支持自定义配置picker插件级数支持无限级注意事项:插件传入数据格式为children树 ...
picker封装 uniapp_uniapp自定义picker城市多级联动组件
uniapp自定义picker城市多级联动组件支持多端--h5.app.微信小程序.支付宝小程序... 支持自定义配置picker插件级数支持无限级注意事项:插件传入数据格式为children树 ...
收货地址的JavaScript城市三级联动【干货拿走不谢！＞_＜】
城市三级联动在我们网上购物时会有收货地址一栏让我们选择收货地址,当中有省.市.区等选择项,如下图: 在添加收货地址时我们会先选择省再选市最后选所在区,这些都是下拉列表式的选择,选择完成才会填写具体地 ...
【web前端性能优化】13.城市三级联动
最近做项目遇到一个城市三级联动的前端问题,感觉一个城市三级联动如果引入一个jquery库,有点太重了,于是就在网上找到了原始的js写法,感觉还挺好用的就记录一下,如下图所示: pay.html < ...
城市三级联动数据及地区代码对照表
城市三级联动数据介绍使用说明数据说明做前端需要城市选择,在网上找到了别人的数据,但是没台湾省.作为爱国中年码农,婶可忍叔不可忍.所以就查阅了[中华人民共和国民政部]的网站,根据最新行程区划生成 ...
台湾、香港、澳门的城市三级联动json
台湾.香港.澳门的城市三级联动json =========== 台湾 ============ {"citys": [{"areas": [{"are ...
城市三级联动功能实现
背景: 最近在进行商品购买流程的开发,需要用户填写自己的收货地址,为了保证地址的准确性,需要使用到全国城市的三级联动功能其中可以有三个思路: 1.使用 js 直接加载城市信息: 2.自己建立数据库, ...
iOS 开发带区号的城市三级联动（xml解析）
iOS 开发带区号的城市三级联动(xml解析) demo下载地址: http://download.csdn.net/detail/qq_20176153/9514906

使用React实现选择城市三级联动组件

使用React实现选择城市三级联动组件相关推荐

最新文章

热门文章