1 {radioChange >= 0 &&
2 <div>
3 {radioChange === 0 ? (
4 <div className={style.template} key="1">
5 <div className={style.inline}>如果金额超过</div>
6 <Input className={style.input} label=" " id="free_price" rules={['required']}
7 msg={this.msg} style={{ width: '100px', display: 'inlinbe-block' }} />
8 <div className={style.inline}>元,免运费,否则按照公里数收取,每公里</div>
9 <Input className={style.input} label=" " id="unit_price" rules={['required']}
10 msg={this.msg} style={{ width: '100px', display: 'inlinbe-block' }} />
11 <div className={style.inline}>元,最多不超过</div>
12 <Input className={style.input} label=" " id="max_price" rules={['required']}
13 msg={this.msg} style={{ width: '100px', display: 'inlinbe-block' }} />
14 <div className={style.inline}>元</div>
15 </div>
16 )
17 : (
18 <div className={style.template} key="2">
19 <div className={style.inline}>如果金额超过</div>
20 <Input className={style.input} label=" " id="free_price" rules={['required']}
21 msg={this.msg} style={{ width: '100px', display: 'inlinbe-block' }} />
22 <div className={style.inline}>元,免运费,否则一口价</div>
23 <Input className={style.input} label=" " id="price" rules={['required']}
24 msg={this.msg} style={{ width: '100px', display: 'inlinbe-block' }} />
25 <div className={style.inline}>元</div>
26 </div>)
27
28 }
29 </div>
  •   如上面代码显示,如果通过一个数值控制,显示和隐藏切换的话,必须加入一个key值,否则在切换的时候活报错,应该是在页面渲染的时候会重复利用这个元素,如果加入keys,渲染的时候,不会产生复用

React切换显示和隐藏的更多相关文章

  1. toggle显示与隐藏切换

    jQuery中显示与隐藏切换toggle方法 show与hide是一对互斥的方法.需要对元素进行显示隐藏的互斥切换,通常情况是需要先判断元素的display状态,然后调用其对应的处理方法.比如显示的元 ...

  2. js 与JQuery显示及隐藏方法

    虽然以后两种方式都能让文本信息隐藏和显示 第一种文本隐藏以后还是会占居位置, 第二种则不会占位置. <p id="p1">这是一段文本.</p> <i ...

  3. WordPress添加显示和隐藏侧边栏按钮开关

    在很多的地方都看见过这种效果,就是在文章页面可以切换显示和隐藏侧边栏功能,感觉还是很有用,比如一篇文章的文字内容过多,那么就可以通过隐藏侧边栏来显示更多的文字便于浏览.比如你可以通过点击我文章标题下方 ...

  4. jQuery效果之显示与隐藏

    .hide([duration][,complete])--目标元素的隐藏. .show([duration][,complete])--目标元素的显示: .toggle([duration][,co ...

  5. VUE中登录密码显示与隐藏的最简设计——基于iview

    目录 VUE中登录密码显示与隐藏的最简设计--基于iview 1.背景 2.实现最终效果 2.1 隐藏密码 2.2 显示密码 3.实现思路 3.1 v-if判断当前密码显示状态 3.2 密码隐藏状态 ...

  6. react中控制元素的显示与隐藏

    1.通过 state 变量来控制是否渲染元素 类似于 vue 的 v-if 方法是通过变量来控制是否加载元素的,如果变量为false,内容就直接不会渲染的. class Demo extends Re ...

  7. Android文本输入框(EditText)切换密码的显示与隐藏

    package cc.c; import android.app.Activity; import android.os.Bundle; import android.text.Selection; ...

  8. React+Ant Design设置左侧菜单导航路由的显示与隐藏(与权限无关)

    最近在学习react时,用到了很流行的UI框架Ant Design,也了解了一下Ant Design Pro,发现它们都有导航组件,Ant Design框架的导航菜单在这里,Ant Design Pr ...

  9. jQuery控制元素显示、隐藏、切换、滑动的方法

    jQuery 隐藏和显示 通过 hide() 和 show() 两个函数,jQuery 支持对 HTML 元素的隐藏和显示: 实例 $("#hide").click(functio ...

随机推荐

  1. 推荐一个zookeeper信息查看工具

    zookeeper信息查看工具 下载地址:https://issues.apache.org/jira/secure/attachment/12436620/ZooInspector.zip 解压,打 ...

  2. MongoDB 和 Mongoose 04

    一.安装 1. 相关 https://www.mongodb.org/dl/win32/ MongoDB的版本偶数版本为稳定版,奇数版本为开发版 MongoDB对于32位系统支持不佳,所以3.2版本以 ...

  3. papers-06-02

    午睡被同事吵醒,只好干活.看到微信公众号有一篇文章说老朋友呢,点进去发现原来相关的工作好多,而且好新好细致. 微信的文章可以见这里: 探究最陌生的老朋友Softmax 里面的几篇文章可以看看. Lar ...

  4. Android中得到布局文件对象有三种方式

    Android中得到布局文件对象有三种方式 第一种,通过Activity对象 View view = Activity对象.getLayoutInflater().inflater(R.layout. ...

  5. JVM由浅入深

    运行时数据区域 Java比起C++一个很大的进步就在于Java不用再手动控制指针的delete与free,统一交由JVM管理,但也正因为如此,一旦出现内存溢出异常,不了解JVM,那么排查问题将会变成一 ...

  6. c#的二进制序列化组件MessagePack介绍

    c#的序列化有多种,我一般喜欢用第三方组件,一个公共组件要拿出来用,而且支持很多语言,甚至以此谋生,肯定有其优势. 有或者说存在必然有其合理性,经过几年开发,我更加喜欢第三方的东西,类似序列化的东西. ...

  7. Aaliyun Linux 64 安装jdk+mysql+tomcat

    参考: http://www.blogjava.net/amigoxie/archive/2013/02/22/395605.html http://bbs.aliyun.com/read/17704 ...

  8. c c++面试----c工程开发之链接

    多数c语言的初学者对c工程开发过程各个阶段的作用理解不到位,而这方面的的知识又是实际开发过程中经常用到的技能点,所以就成为面试考察中一个重要的考察方面.例如:头文件的作用.头文件的内容:链接的作用和意 ...

  9. baidu 地图 鼠标移上显示标签 鼠标离开隐藏标签

    为了解决 label太多,文字会重叠看不清 所以提出这种办法 核心代码 1,创建的时候 将label设置为隐藏 2,通过百度地图监听事件 ,  mouseover或onmouseover 触发显示 3 ...

  10. jdbc学习笔记02

    数据库连接池 DBCP DataBase Conection Pool:数据库连接池 如果没有数据库连接池,每一次业务都需要服务器和数据库服务器建立一次连接,业务处理完连接断开,如果有1万次业务处理, ...