1.1.0-beta.4 • Published 4 years ago
react-address-picker-cc v1.1.0-beta.4
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
重要版本升级记录
- 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
1.1.0-beta.4
4 years ago
1.1.0-beta.3
4 years ago
1.1.0-beta.2
4 years ago
1.1.0-beta.1
4 years ago
1.0.6
5 years ago
1.0.5
5 years ago
1.0.3
5 years ago
1.0.2
5 years ago
1.0.1
5 years ago
1.0.0
5 years ago