使用ant design的select组件时placeholder不生效/不起作用的解决办法-编程思维

先来说说使用Ant Design和Element-ui的感觉吧。

公司的项目开发中用的是vue+element-ui,使用了一通下来后,觉得element-ui虽然也有一些问题或坑,但这些小问题或坑凭着自己的能力还都能解决掉,使用起来也很丝滑柔顺。

而听说Ant Design和React更配哦,但是也说一下使用Ant Design的感觉吧,首先个人觉得Ant Design给的demo有点乱七八糟,可能是React本身js和DOM混在一起跟人的感觉就不够清爽吧,如下图:

下图是element-ui一目了然的demo:

其次,Ant Design的有些坑,会令你防不胜防,而且很诡异,比如它的select组件,设置了placeholder时也设置了value绑定一个state默认的空值,这时placeholder却不生效,当然会有人说你设置了value绑定一个state默认的空值,placeholder当然不起作用了,可空值本来就是false,本来就是不存在的值,有不存在的值时,placeholder才能发挥它本来的作用。再者如果不这样设置,那如何重置清空select的值,当然也还会有人说可以使用提供的this.props.form.resetFields()来重置,结果是我用了这玩意儿,可这玩意儿也不起作用啊,难道是我使用的姿势不对吗?如下图:

从图中可以看出,点击重置按钮,onClick事件中也使用了this.props.form.resetFields(),可select组件却没有被重置,右侧的控制台中打印的是this.props的值,很明显是有form.resetFields这个方法的,但就是没有起作用,所以我设置了value绑定一个state默认的空值,才可以实现重置select组件,由此也就出现了上边描述的问题。

于是我就上网查了一下资料,有人给出了解决的办法,如下:

当select的value绑定一个state默认值时,如果默认值是''或null时,placeholder不生效
解决方案:默认值设为undefined

这你去哪儿说理去,奇葩吗?诡异吗?难道真的是我的用法有问题?我也不知道,期待有高手能解答我的疑问,不胜感激!

目前,还在学习React和Ant Design中,可能还会遇到其他的一些问题,但我一直秉持着神挡杀神、佛挡杀佛的精神来解决问题,相信广大前端er也是跟我一样,一起加油!

本文参考:https://www.cnblogs.com/ruoshuisanqian/p/10330949.html

版权声明:本文版权归作者所有,遵循 CC 4.0 BY-SA 许可协议, 转载请注明原文链接
https://www.cnblogs.com/tnnyang/p/10528952.html

react根据传参的不同动态注册不同的子组件-编程思维

上一篇文章介绍了关于Vue如何根据传参的不同动态注册不同的子组件,实现过程请查阅Vue.extend动态注册子组件,由Vue的这个功能我就自然联想到了使用react该如何实现同样的功能呢。其实,用react实现同样的功能会更简单,不用那么多的API,不用去查找这些平时可能用的很少的API的用法,这也是为什么很多人喜欢r

封装react antd的table表格组件-编程思维

封装组件是为了能在开发过程中高度复用功能和样式相似的组件,以便我们只关注于业务逻辑层的处理,提高开发效率,提高逼格,降低代码重复率,降低劳动时间,减少加班的可能。 本次组件的封装采用了函数式组件即无状态组件的方式来提高页面渲染性能,由于无状态组件在数据变更后不会主动触发页面的重新渲染,所以本次的封装也用到了React

封装react antd的form表单组件-编程思维

form表单在我们日常的开发过程中被使用到的概率还是很大的,比如包含了登录、注册、修改个人信息、新增修改业务数据等的公司内部管理系统。而在使用时这些表单的样式如高度、上下边距、边框、圆角、阴影、高亮等等都大同小异、大差不差且表单的功能基本相似,所以很有必要对这些表单来一个简单的封装。 其实,封装组件的意义我们在上一篇封

react+ant design设置左侧菜单导航路由的显示与隐藏(与权限无关)-编程思维

最近在学习react时,用到了很流行的UI框架Ant Design,也了解了一下Ant Design Pro,发现它们都有导航组件,Ant Design框架的导航菜单在这里,Ant Design Pro是权限菜单,权限菜单简单来说就是根据登录的权限来展示不同的菜单给用户,比如管理员有给用户分配不同角色的权限,那管理员就

react中useref的应用-编程思维

何为useRef useRef是随着react函数式组件发展而来的,是react众多官方hook中的一个,调用useRef可以返回一个伴随这组件整个声明周期不发生改变的对象,这个对象常见的用途有两个: 用于绑定dom元素,从而实现对dom元素的操作 用于保存不希望随着组件重新渲染而改变的值,如定时器 在项目中的应用

select在各个浏览器中的兼容性问题-编程思维

我们知道select标签在各个浏览器中的属性和各浏览器的支持各有些不同,从而造成select选择框在各浏览器的显示有不同。 下面我们通过对主要CSS属性的支持,打造全兼容select。 对select的height、padding、line-height分别利用控制变量的方法写了个DEMO在各浏览器上测试三种情 况:h

css解决select下拉表单option高度的办法-编程思维

css在给select下拉表单设置样式如边框时可以轻松搞定,而我们在不喜欢其默认的下拉箭头的样式时试图通过background:url(图片路径)来修改之,则往往会出现浏览器的兼容性问题,在网上查了好多资料,最好的解决办法也是大神们用js来模拟下拉表单。额~,好吧,暂且就按照大神们的办法来解决这个问题吧。 下边来说说c

封装vue基于element的select多选时启用鼠标悬停折叠文字以tooltip显示具体所选值-编程思维

相信很多公司的前端开发人员都会选择使用vue+element-ui的形式来开发公司的管理后台系统,基于element-ui很丰富的组件生态,我们可以很快速的开发管理后台系统的页面(管理后台系统的页面也不复杂,大多都是分页查询类需求和增删改查)。但一个前端框架有优点,就必然会有一些缺点或bug存在,element-ui框

golang学习之select用法-编程思维

早期的select函数是用来监控一系列的文件句柄,一旦其中一个文件句柄发生IO操作,该select调用就会被返回。golang在语言级别直接支持select,用于处理异步IO问题。 select用法同switch类似,如下: timeout := make (chan bool, 1)ch := make(chan