在使用 andt design 的时候遇到个需求,需要清除 Select 组件选中后的值,让它变成什么都没选中,显示 placeholder

刚开始以为设置为 null 即可,结果发现设置为 null 并没什么卵用,只是得到什么都没匹配上的结果,选择框中为空。

后来发现将 value 值设置为 undefined 即可。

其实,在 react 中,传入 undefined 就代表什么都没传入,这时组件中如果有默认的 props 值则会使用默认值。

所以,上面传入 null,其实也是传入了值,所以 Select 组件会根据这个值去匹配,而没匹配到所以内容为空。

而传入 undefined 的时候,其实表示什么都没传,Select 组件就不会再去匹配,而现实 placeholder 的值。

另外就是要注意,如果通过条件判断,两个分支渲染的组件都是同一个组件,只是可能组件中传入的 props 会不同。这是需要给这两个相同的组件加上 key 属性。如果没有 key 属性,条件变化后,并不会在这两个同类组件中切换,只有加上了 key 属性,才会认为这是两个不同的组件,条件变化后才会切换。

react 不能往组件中传入属性的值为 undefined的更多相关文章

  1. React技巧之组件中返回多个元素

    原文链接:https://bobbyhadz.com/blog/react-return-multiple-elements 作者:Borislav Hadzhiev 正文从这开始~ fragment ...

  2. 学习旧岛小程序 (5) observer 函数中修改属性的值

    不要在一个属性的 observer  函数中修改属性的值 不然会造成内存泄露 错误代码: properties: { /* 期刊号 */ index: { type: String, observer ...

  3. react+dva 全局model中异步获取数据state在组件中取不到值

    先上结论,不是取不到,是写法有问题. 全文分4部分,1是问题描述,2是一开始的解决想法(错误做法),3是问题产生原因的思考,4是正常解决方法.只想看结论直接跳4 1.问题描述 接触react dva一 ...

  4. 微信小程序将外部数据从父组件中传入到子组件

    小程序组件开发遇到一个组件内嵌两个组件,而这两个子组件所使用的数据来自于同一个API,如下图所示. 如果这时候两个子组件各自导入同一个接口就会显得多余.另外的办法是由父组件导入接口数据,再从父组件将接 ...

  5. Java -- XStreamAlias 处理节点中的属性和值

    XStreamAlias 可以把objec和xml相互转换,但是有时候节点带有属性和值就需要特殊处理下: <?xml version="1.0" encoding=" ...

  6. C#反射遍历/查询类中的属性以及值

    遍历一个类/或类对象的属性/值,很有用,看个例子 using System; using System.Collections.Generic; using System.Linq; using Sy ...

  7. Java使用PropertyDescriptor获取实体类中私有属性的值,并给私有属性赋值

    大家都知道Java类中的私有的(private)属性是获取不到的(即使使用继承依然获取不到),那如果非要获取私有属性的值怎么办呢?一般的做法是将该java类封装称为一个JavaBean,即封装该私有属 ...

  8. 从Object对象中读取属性的值

    C#是强类型语言,强到多变态?一个对象没有定义某个属性,你想点出来,IDE直接给你报语法错误.远不如js那么自由,想怎么点怎么点. 如果你从别人接口中拿到的就是Object类型,你想获取某个属性的值怎 ...

  9. Vue2自定义指令改变DOM值后未刷新data中绑定属性的值

    标签(空格分隔): Vue 自定义指令用于过滤输入框,只允许输入数字: Vue.directive('numberOnly', { bind: function (el, binding) { el. ...

随机推荐

  1. get( )与getline( )区别

    get与getline区别不是很大,但一个明显的区别是get遇到 '\n '字符后便返回,这是 '\n '还在缓冲区中,所以下次读出来的将是 '\n ',而getline遇到 '\n '也返回,但它会 ...

  2. HTML特殊符号对应代码

    HTML中的特殊符号所对应代码,收藏使用 符号 HTML 符号 HTML     & & < < > > ⁄ ⁄ " " ¸ ¸ ° ° ½ ...

  3. Matlab与C/C++联合编程之Matlab以MEX方式调用C/C++代码(四)

    利用Matlab与VC++联合编程,既可在C语言程序中打开Matlab引擎,调用Matlab的ToolBox函数和作图函数,也可在Matlab中调用C代码生成的动态链接库文件,用以加快执行速度.缩短开 ...

  4. [Windows驱动]驱动包(Driver Packages)

    在windows下安装一个驱动,我们你需要把所有需要的软件打包-称为驱动包.驱动包里包括系统提供的给所有设备类使用的一般安装工具,还包括了设备商提供的设备特定的组件.下面我们就来看看驱动包里具体需要哪 ...

  5. 获取UIColor中的RGB值(本人亲测多个获取RGB值的方法,这个最有效)

    在自己研发的项目个人项目中,碰到一个从颜色中获取RGB值的需求. 在网上找了许久,也有一些方法可以获取RGB值,但不能获取黑白以及灰色的值(他们是非RGB颜色空间,不清楚什么意思,反正亲测确实获取不了 ...

  6. 项目管理软件---redmine安装配置

    redmine是一个开源的项目管理软件,其主页是:http://www.redmine.org redmine是基于Ruby on Rails框架的,跨平台和跨数据库. 安装过程 ========== ...

  7. cf--2A

    //Accepted 100 KB 92 ms //模拟 #include <cstdio> #include <cstring> #include <iostream& ...

  8. C#注册表常用操作

    1:加键 改值 Microsoft.Win32.RegistryKey Key = Microsoft.Win32.Registry.CurrentUser.CreateSubKey( @" ...

  9. C#线程状态简析

    在C# 语言世界中,当我们创建一个新的子线程,该线程状态为unstarted, 子线程开始之后,子线程状态为Running,IsAlive 为true: 线程响应 Thread.Start 并开始运行 ...

  10. Ubuntu 14.10 下MySQL无法远程连接问题

    安装好MySQL之后,如果需要远程连接,那么需要做一些配置,否则会出现一些类似的错误,如 mysql root用户ERROR (): mysql 远程登录 ERROR () mysql 远程登录200 ...