基于antd的地区多选组件

• 可以切换为按照大区选择和按照拼音选择两种模式
• 地区可多选,点击大区则相当于选中大区下所有省

安装

cnpm install 'fy-mutiple-region-relect'

fy-mutiple-region-relect

fy-mutiple-region-relect 是一个基于 React, Antd 封装的地区选择业务组件；帮助你轻松的解决项目中需要地区多选,选择大区的问题。

最近更新

fy-mutiple-region-relect 升级到 1.0.5，优化样式

fy-mutiple-region-relect 升级到 1.0.2，优化内部代码.

fy-mutiple-region-relect 升级到 1.0.1，支持传入showDistrict来是否显示地区.

在线实时演示

http://www.acglouvre.art/#/select

如何在项目中接入 fy-mutiple-region-relect;

安装

npm install --save fy-mutiple-region-relect

组件用法

<div id="app"></div>

.container {
  width: 200px;
  margin: 100px 60px;
  .button-group {
    margin-top: 20px; 
  }
}

import React, { Component } from 'react'
import MultipleRegionSelect from  'fy-mutiple-region-relect'
import { Button } from 'antd'
import regionData from './region'
import './style.scss'

class Select extends Component {
  onMutipleSelect = (ref) => {
    this.mutipleSelect = ref;
  }

  getAddress = ()=>{
    console.log(this.mutipleSelect.getAllAddressArr());
  }

  clearAddress = ()=>{
    this.mutipleSelect.clearAddressArr();
  }

  render(){
    const { regions, allAreaList } = regionData;
    return(
      <div className="container">
        <h2>测试地区多选</h2>
        <MultipleRegionSelect 
          regions={regions}
          allAreaList={allAreaList}
          showClear={true}
          disabledDistrict={true}
          onRef={this.onMutipleSelect}
        />
        <div className="button-group">
          <Button type="primary" onClick={this.getAddress}>获取地区json</Button>
          <Button style={{marginLeft:20}} onClick={this.clearAddress}>重置</Button>
        </div>
      </div>
      
    )
  }
}

export default Select

ReactDOM.render(
  <Select />,
)

示例图片

参数说明：

参数 | 说明 | 类型 | 默认值 ----|------|-----|------ regions | 省市区JSON | Array | [] allAreaList | 大区JSON | Array | [] disabledDistrict | 是否隐藏区 | Boolean | true showClear | 清除按钮 | Boolean | true