在上一节利用element-ui封装地址输入的组件留下了个尾巴,说react搭配ant-design封装一下地址输入的组件的。本来应该早早就完成的,但是由于这中间发生了一些事情,导致了突发性的换了工作,所以一直耽误到现在,今天就把这个尾巴结束吧!

  事实上,ant-design在form组件内提供了自定义表单控件的写法,这里需要做的也就是把这个自定义表单控件搬过来而已。

  

  其实,关键在于,属性值value,和事件onChange。然后,组件内部在constructor的时候,转换传递过来的value,当Cascader的onChange事件发生时,获取新的数据值,调用this.props.onChange事件,同理,在Input组件发生onChange事件时,也是获取新的e.target.value,调用this.props.onChange事件。

  到这里,基本上这个组件封装就完成了。

  对比一下element-ui发现,两者本质上是一致的。

  都是利用内部组件各自onChange时,获取最新的值,然后调用props.onChange事件,把数值传递给使用者。很容易理解,在Cascader发生onChange时,调用props.onChange,比较不好理解的是,Input组件也是在onChange时,调用props.onChange,而不是我们通常理解的发生input时,调用props.onChange,这是为什么呢?

  不管是element-ui,还是ant-desigin,都没有向我们暴露Input组件的input事件,所以我们就没有办法获取Input组件的input事件,所以只好退而求其次的使用change事件。然后,在vue中,为了使用v-model指令,我们需要添加mode:{event: 'change', prop:'value' }属性,而在react中,没有类似的指令,都是以属性形式传递的,所以直接使用value和onChange即可。

  还是直接贴代码吧!

  

import React, { Component } from 'react'
import { Form, Input, Row, Col, Cascader } from 'antd'
// 城市选择过滤函数
function filter (inputValue, path) {
return path.some(option => option.name.toLowerCase().indexOf(inputValue.toLowerCase()) > -1)
} class AddressInput extends Component {
static getDerivedStateFromProps (nextProps) { // Should be a controlled component.
if ('value' in nextProps) {
return {
...(nextProps.value || {}),
}
}
return null
}
constructor(props) {
super(props) const value = props.value || {}
this.state = {
values: value.values || [],
registeredAddress: value.registeredAddress || '',
}
this.cascader = {}
} handleAddressChange = e => {
const registeredAddress = e.target.value || ''
if (!('value' in this.props)) {
this.setState({ registeredAddress })
}
this.triggerChange({ registeredAddress })
} handleCascaderChange = (values, items) => {
this.setState({ values })
this.cascader = {
areaCode: values.slice(-1)[0],
areaProvince: items[0].name,
areaCity: items[1].name,
areaDistrict: items.slice(-1)[0].name
}
this.triggerChange({ values })
} triggerChange = changedValue => {
const onChange = this.props.onChange
if (onChange) {
const item = Object.assign({}, this.state, this.cascader, changedValue)
if (item.values) delete item.values
onChange(item)
}
} render () {
const { values, registeredAddress } = this.state
// console.log(values)
const { allowClear = false, regionData = [], size = 'default' } = this.props
return (
<Row gutter={8} type="flex" justify="space-between" >
<Col span={12}>
<Cascader
allowClear={allowClear}
size={size}
value={values}
options={regionData}
fieldNames={{ value: 'code', label: 'name' }}
showSearch={{ filter }}
onChange={this.handleCascaderChange}
placeholder="请选择省市区" />
</Col>
<Col span={12}>
<Input
size={size}
placeholder="请输入具体地址"
value={registeredAddress}
onChange={this.handleAddressChange}
/>
</Col>
</Row>
)
}
} export default Form.create({ name: 'customized_form_controls' })(AddressInput)

  

  

利用ant-design封装react的地址输入组件的更多相关文章

  1. ElementUI(vue UI库)、iView(vue UI库)、ant design(react UI库)中组件的区别

    ElementUI(vue UI库).iView(vue UI库).ant design(react UI库)中组件的区别: 事项 ElementUI iView ant design 全局加载进度条 ...

  2. Ant Design of React 框架使用总结1

    一.  为什么要用UI 框架 统一了样式交互动画 . Ui框架会对样式,交互动画进行统一,保证了系统风格完整统一,不像拼凑起来的. 兼容性 ,不是去兼容IE 6 7 8那些低版本浏览器,而是对主流的标 ...

  3. 同时使用 Ant Design of React 中 Mention 和 Form

    使用场景,在一个列表中,点击每一行会弹出一个表单,通过修改表单数据并提交来修改这一行的数据,其中某个数据的填写需要通过Mention实现动态提示及自动补全的功能. 具体效果为: 遇到的问题: 1.希望 ...

  4. react使用ant design pro时的滑动图片组件

    react的滑动图片验证,是基于https://segmentfault.com/a/1190000018309458?utm_source=tag-newest做的修改,改动的主要有以下几点: 1. ...

  5. button JS篇ant Design of react

    这篇看ant Desgin of react的button按钮的js代码,js代码部分是typescript+react写的. button组件里面引用了哪些组件: import * as React ...

  6. button JS篇ant Design of react之二

    最近更新有点慢,更新慢的原因最近在看 <css世界>这本书,感觉很不错 <JavaScript高级程序设计> 这本书已经看了很多遍了,主要是复习前端的基础知识,基础知识经常会过 ...

  7. Ant Design项目记录和CSS3的总结和Es6的基本总结

    这里主要是介绍自己运用ANT框架的一些小总结,以前写到word里,现在要慢慢传上来, 辅助生殖项目总结:从每个组件的运用的方法和问题来总结项目. 1.项目介绍 辅助生殖项目主要运用的是Ant.desi ...

  8. 【React自制全家桶】一、Webstrom+React+Ant Design+echarts搭建react项目

    前言 一.React是Facebook推出的一个前端框架,之前被用于著名的社交媒体Instagram中,后来由于取得了不错的反响,于是Facebook决定将其开源.出身名门的React也不负众望,成功 ...

  9. React + Ant Design网页,配置

    第一个React + Ant Design网页(一.配置+编写主页) 引用博主的另外一篇VUE2.0+ElementUI教程, 请移步:  https://blog.csdn.net/u0129070 ...

随机推荐

  1. 为什么使用Spring Boot

    原文:https://dzone.com/articles/why-springboot 作者:Siva Prasad Reddy Katamreddy 译者:Oopsguy 本文将介绍各种 Spri ...

  2. abd shell pm list packages

    abd shell pm list packages ####查看当前连接设备或者虚拟机的所有包 adb shell pm list packages -d #####只输出禁用的包. adb she ...

  3. jdbc相比于hibernate的弊端

    1.编程人员必须既懂Java语言,又懂SQL语言,才能编写数据库访问代码.(感觉用不用hibernate,SQL都要会呀) 2.程序代码中嵌入大量字符串形式的SQL语句,降低了程序代码的可读性. 3. ...

  4. ubantu 安装boost库 c++connector

    安装libmysqlcppconn: sudo apt-get install libmysqlcppconn-dev 安装libboost: sudo apt-get install libboos ...

  5. Projects: Linux scalability: Accept() scalability on Linux 惊群效应

    小结: 1.不必要的唤醒 惊群效应 https://github.com/benoitc/gunicorn/issues/792#issuecomment-46718939 https://www.c ...

  6. kotlin泛型中星号投射

    如果一个泛型类型中存在多个类型的参数,那么每个类型的参数都可以单独投射,例如:如果类型定义为:"interface Function<in T,out>",那么可以出现 ...

  7. Connection

    作用: * 获取执行sql语句对象 ** createStatement(): 获取Statement对象 ** prepareStatement(String sql): 获取预处理对象 ** pr ...

  8. 07-08 Flutter仿京东商城项目 商品分类页面布局:Flutter仿京东商城项目 商品分类页面数据渲染

    Flutter实战(交流群:452892873) 本项目是一个实战项目,根据目录建文件,并复制从第一节到最新更新的文章,可以构成完整的一个请求后台数据的项目: CateModel.dart class ...

  9. 阶段5 3.微服务项目【学成在线】_day05 消息中间件RabbitMQ_10.RabbitMQ研究-工作模式-路由工作模式介绍

    队列在绑定交换机的时候可以指定routingKey, 路由模式: 1.每个消费者监听自己的队列,并且设置routingkey. 2.生产者将消息发给交换机,由交换机根据routingkey来转发消息到 ...

  10. SSRF小梳理

    SSRF(Server-Side Request Forgery:服务器端请求伪造)是一种由攻击者构造形成由服务端发起请求的一个安全漏洞.一般情况下,SSRF攻击的目标是从外网无法访问的内部系统.(正 ...