react结合antd的Cascader组件实现pc端选择城市控件

业务需求，网上找了好多，发现都不太满意，于是自己写了一个

1.实现如下

提示：
数据地址点击 https://xf-1252186245.cos.ap-chengdu.myqcloud.com/data/data.js 复制下来放到组件同级目录，命名data.js就好。

上面地址data.js乱码的话，点击 github仓库地址 https://github.com/l-x-f/react-city-select 将代码克隆到本地，源码里有data.js，也可以直接访问 data.js github仓库地址路径。

依赖： react antd rc-form prop-types等，先安装依赖，步骤略。

CitySelect.jsx 文件

import React, { Component } from "react";
import { createForm } from "rc-form";
import { Cascader } from "antd";
import city from "./data"; //  数据见上提示
import PropTypes from "prop-types";//先配置修饰器 没有配置的话用把 @createForm()删掉
//然后把最后一行 export default CitySelect;  换成 export default createForm()(CitySelect)
@createForm()
class CitySelect extends Component {// props类型检查static propTypes = {//  监听选择onChange: PropTypes.func,// 获取选择值getSelectedValues: PropTypes.func,// 默认值value: PropTypes.array};onCascaderChange = selectedValues => {const { onChange, getSelectedValues } = this.props;const result = [];// 递归查询城市所有数据function findCityData(city) {city.forEach(item => {const { id, label, value, children } = item;if (selectedValues.includes(value)) {result.push({ id, label, value });}if (children && children.length) {findCityData(children);}});}findCityData(city);// 分发监听onChange && onChange(selectedValues);getSelectedValues && getSelectedValues(result);};componentDidMount() {const {form: { setFieldsValue },value: selectedValues} = this.props;if (!selectedValues || !selectedValues.length) {return;}const result = [];// 递归查询城市名称数据function findLabel(children) {children.forEach(item => {const { label, value, children } = item;if (selectedValues.includes(label)) {result.push(value);}if (children && children.length) {findLabel(children);}});}// 卡省份解决县或市名称一样的问题city.forEach(item => {const { label, value, children } = item;if (selectedValues.includes(label)) {result.push(value);if (children && children.length) {findLabel(children);}}});// 设置默认值setFieldsValue({ city: result });}render() {const { getFieldProps } = this.props.form;return (<div><Cascaderoptions={city}{...getFieldProps("city", {onChange: this.onCascaderChange,rules: [{ required: true }]})}placeholder="请选择城市"/></div>);}
}export default CitySelect;

2.使用

import React, { Component } from "react";
import { Form,  Button, message, Icon } from "antd";import CitySelect from "@/components/CitySelect";import "./hotel.less";const FormCreate = Form.create;
const FormItem = Form.Item;@FormCreate()
class HotelSetting extends Component {state = {selectedValues: []};handleReset = () => {this.props.form.resetFields();};// 获取选择值getSelectedValues = selectedValues => {this.setState({selectedValues});};handleSumit = e => {const { form } = this.props;e.preventDefault();form.validateFields((err, formData) => {console.log(formData, "formData");if (err) {message.destroy();return message.warning("请完整填写表单");}const data = {...formData,selectedValues: this.state.selectedValues};console.log(data, "data");});};render() {const { getFieldDecorator } = this.props.form;const defaultCity = ["陕西省", "西安市", "碑林区"];return (<FormclassName="custom-form custom-vertical-hotel-form"layout="vertical"labelAlign="left"onSubmit={e => {this.handleSumit(e);}}style={{ background: "#fff", padding: 24 }}>{/* 数据绑定 拿到的city字段是城市编码  getSelectedValues监听可以拿到选择的数据对象 */}<FormItem label="城市选择：">{getFieldDecorator("city", {initialValue: defaultCity,rules: [{ required: true, message: "请选择城市选择" }]})(<CitySelect getSelectedValues={this.getSelectedValues} />)}</FormItem><FormItem label="城市选择："><CitySelectgetSelectedValues={this.getSelectedValues}value={defaultCity}/></FormItem><FormItem style={{ paddingBottom: 0 }}><Button type="primary" htmlType="submit"><Icon type="arrow-up" />保存</Button></FormItem></Form>);}
}export default HotelSetting;

hotel.less

:global(.custom-vertical-hotel-form .ant-form-item-label) {width: 90px;vertical-align: top;
}
:global(.custom-vertical-hotel-form .ant-form-item-control-wrapper) {width: 340px;display: inline-block;
}

3.效果及拿到的值

react结合antd的Cascader组件实现pc端选择城市控件相关推荐

ASP.NET自定义控件组件开发第四章组合控件开发CompositeControl
第四章组合控件开发CompositeControl 大家好,今天我们来实现一个自定义的控件,之前我们已经知道了,要开发自定义的控件一般继承三个基类:Control,WebControl,还有一个就 ...
ASP.NET自定义控件组件开发第三章为控件添加事件后篇
第三章为控件添加事件后篇前一篇文章只是简单的说了下事件,但是大家应该方法,在ASP.NET自定义控件中只是简单那么定义事件是行不通.如果大家开发的是WinForm中的事件,之前的定义可能没有什 ...
ASP.NET自定义控件组件开发第三章为控件添加事件前篇
第三章为控件添加事件好了,我们之前以前开发一个控件.而且也添加了属性,开发也很规范,但是那个控件还差最后一点:添加事件. 系列文章链接: ASP.NET自定义控件组件开发第一章待续 ASP.N ...
React给antd中TreeSelect组件左侧加自定义图标icon
很多时候官网并没有给我们过多地详解来解释他们的产品怎么使用. 今天碰到了一个很恶心的问题,就是在给antd的treeSelect组件加左侧icon的时候,总是报一个警告, Warning: Each ...
对于 React 结合 Antd 的 Upload 组件实现图片上传
一. React 结合 Antd 实现图片上传引入所需相关的组件和文件,代码如下所示: import React, { Component } from 'react' import PropTyp ...
使用vue-mugen-scroll组件实现pc端滚动刷新
由于工作的原因,现在需要实现一个滚动加载(PC端)的效果,之前使用的是vue+element,但是element没有类似的组件,所以去github上找了一个名叫vue-mugen-scroll,使用起 ...
基于webview的选择滑动控件（PC和wap版）
有了webview,大家开发ios或者安卓的app就方便很多啦. 第一可以增量更新: 第二webview可以同时兼容ios和安卓,减少开发量哦. --------------------------- ...
android使组件居中,Android图文居中显示控件使用方法详解
最近项目中用到了文字图标的按钮,需要居中显示,如果用TextView实现的方式,必须同时设置padding和drawablePadding.如下: android:layout_width=" ...
android编程多组件布局,Android把多个控件定义成一个整体的布局类使用
在程序中有时候几个控件要放在一起,想随意放在布局上,而且不仅一个布局要使用,此时就想把这几个控件定义成一个新的View就好了,于是就有了下面这个类新的控件类SeekBarGroup.java,Seek ...

react结合antd的Cascader组件实现pc端选择城市控件

react结合antd的Cascader组件实现pc端选择城市控件

react结合antd的Cascader组件实现pc端选择城市控件相关推荐

最新文章

热门文章