仿京东移动端地址选择组件 mobile/pc

react-address-picker-cc

仿京东移动端地址选择组件 适配触屏和PC 有异步获取收货地址的方法

Install

npm install --save react-address-picker-cc Example

cd examples npm start Usage

import React, { Component } from 'react' import AddressPicker from 'react-address-picker-cc' import { district } from './district'; export default class Sync extends Component { state = { address: '', dataSource: district, selectedIdList: [340000, 341800, 341824] } showPicker = () => { this.ecRef.show() } hidePicker = () => { this.ecRef.hide() } onAddressChange = (selectedRows) => { this.setState({ address: selectedRows.map(item => item.areaName).join(','), selectedIdList: selectedRows.map(item => item.id), }) console.log('选择值:', selectedRows) } render () { const { dataSource, selectedIdList } = this.state return ( <div> <h1>同步获取</h1> <input onClick={this.showPicker} value={this.state.address} placeholder="请选择地区" readOnly style={{ width: '100%' }} /> <AddressPicker dataSource={dataSource} selectedIdList={selectedIdList} text='这是收货地址组件' ref={e => (this.ecRef = e)} onAddressChange={this.onAddressChange} onClose={this.hidePicker} /> </div> ) } } Props

属性名	类型	默认值	描述
title	String | node	配送至	标题
className	String		跟节点class
dataSource	array		数据源
onClose	Function		关闭时回调函数
onAddressChange	Function		选择完闭时的回调函数; (selectedRows) => {}
navTips	string	请选择	下一项的提示文字
pickerStatusChange	Function		Picker展开收齐的回调；(status) => {}
selectedIdList	array		初始化地址的id数组
isAsyncData	boolean		是否异步获取数据
getOneLevelData	Function		获取第二、三层数据的方法，isAsyncData后有效 并且以Promise的方式返回dataSource

重要版本升级记录 v1.1.0-beta.4 恢复 getDerivedStateFromProps 方法 v1.1.0-beta.3 删除 getDerivedStateFromProps 方法设置，在show方法上初始化数据 v1.1.0-beta.2 源代码改用TypeScript重写 增加CSS变量更改样式主题，提供暗色主题 对 getOneLevelData 方法进行优化，注意要以Promise的方法返回 dataSource v1.0.0 首次上线，包含异步获取收货地址、Touch切换 近期升级计划 尝试添加单元测试用例 测试场景 功能测试简单列举 外部设置 空 省级 县级 省市县切换 同级切换 10级别切换效果 触摸切换 上下级切换 小范围切换 升级过程bug列表，都已修复 小范围移动bug 同步，关闭重新打开的效果 只有一级的效果，”请选择“ 参考链接

借鉴了同行的组件 react-picker-address

License

MIT © https://github.com/shenghanqin/