Skip to content
仿京东移动端地址选择组件 mobile/pc
Branch: master
Clone or download
Hanqin
Hanqin Merge pull request #3 from shenghanqin/feature/v105-html-tab-clean
更新预览图 Feature/v105 html tab clean
Latest commit 32f8c2b Mar 24, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
example 提交新版本 Mar 24, 2019
src html元素优化 Mar 24, 2019
.babelrc 基于create-react-library创建基本仓库 Mar 23, 2019
.editorconfig 基于create-react-library创建基本仓库 Mar 23, 2019
.eslintrc
.gitignore 基于create-react-library创建基本仓库 Mar 23, 2019
.travis.yml 基于create-react-library创建基本仓库 Mar 23, 2019
LICENSE Initial commit Mar 23, 2019
README.md
package.json 更换预览图 Mar 24, 2019
rollup.config.js 编写基础文档 Mar 23, 2019

README.md

react-address-picker-cc

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

NPM JavaScript Style Guide

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 } = this.state
    return (
      <div>
        <h1>同步获取</h1>
        <input onClick={this.showPicker} value={this.state.address} placeholder="请选择地区" readOnly style={{ width: '100%' }} />
        <AddressPicker 
          dataSource={dataSource}
          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 是否异步获取数据
asyncIdOne Number 异步数据返回的一级id,isAsyncData后有效
getOneLevelData Function 获取第二、三层数据的方法,isAsyncData后有效

参考链接

借鉴了同行的组件 (https://github.com/LANIF-UI/react-picker-address)

License

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

You can’t perform that action at this time.