React切换显示和隐藏
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切换显示和隐藏的更多相关文章
- toggle显示与隐藏切换
jQuery中显示与隐藏切换toggle方法 show与hide是一对互斥的方法.需要对元素进行显示隐藏的互斥切换,通常情况是需要先判断元素的display状态,然后调用其对应的处理方法.比如显示的元 ...
- js 与JQuery显示及隐藏方法
虽然以后两种方式都能让文本信息隐藏和显示 第一种文本隐藏以后还是会占居位置, 第二种则不会占位置. <p id="p1">这是一段文本.</p> <i ...
- WordPress添加显示和隐藏侧边栏按钮开关
在很多的地方都看见过这种效果,就是在文章页面可以切换显示和隐藏侧边栏功能,感觉还是很有用,比如一篇文章的文字内容过多,那么就可以通过隐藏侧边栏来显示更多的文字便于浏览.比如你可以通过点击我文章标题下方 ...
- jQuery效果之显示与隐藏
.hide([duration][,complete])--目标元素的隐藏. .show([duration][,complete])--目标元素的显示: .toggle([duration][,co ...
- VUE中登录密码显示与隐藏的最简设计——基于iview
目录 VUE中登录密码显示与隐藏的最简设计--基于iview 1.背景 2.实现最终效果 2.1 隐藏密码 2.2 显示密码 3.实现思路 3.1 v-if判断当前密码显示状态 3.2 密码隐藏状态 ...
- react中控制元素的显示与隐藏
1.通过 state 变量来控制是否渲染元素 类似于 vue 的 v-if 方法是通过变量来控制是否加载元素的,如果变量为false,内容就直接不会渲染的. class Demo extends Re ...
- Android文本输入框(EditText)切换密码的显示与隐藏
package cc.c; import android.app.Activity; import android.os.Bundle; import android.text.Selection; ...
- React+Ant Design设置左侧菜单导航路由的显示与隐藏(与权限无关)
最近在学习react时,用到了很流行的UI框架Ant Design,也了解了一下Ant Design Pro,发现它们都有导航组件,Ant Design框架的导航菜单在这里,Ant Design Pr ...
- jQuery控制元素显示、隐藏、切换、滑动的方法
jQuery 隐藏和显示 通过 hide() 和 show() 两个函数,jQuery 支持对 HTML 元素的隐藏和显示: 实例 $("#hide").click(functio ...
随机推荐
- POJ 2155 Matrix【二维树状数组+YY(区间计数)】
题目链接:http://poj.org/problem?id=2155 Matrix Time Limit: 3000MS Memory Limit: 65536K Total Submissio ...
- 解决TextBox Ctrl+A不能全选的问题
// 添加keyPress事件 private void textBox1_KeyPress(object sender, KeyPressEventArgs e) { if (e.KeyChar = ...
- Struts2学习笔记——Struts2搭建和第一个小程序
1.新建web项目 2.配置Struts2核心过滤器 (1)打开web.xml文件,做以下配置: <?xml version="1.0" encoding="UTF ...
- Android学习笔记_55_Tween动画 (渐变、缩放、位移、旋转)
Android 平台提供了两类动画. 一类是Tween动画,就是对场景里的对象不断的进行图像变化来产生动画效果(旋转.平移.放缩和渐变).第二类就是 Frame动画,即顺序的播放事先做好的图像,与gi ...
- 课时91.CSS元素显示模式(掌握)
在HTML中HTML将所有的标签分为两类,分别是容器级和文本级 在CSS中CSS也将所有的标签分为两类,分别是块级元素和行内元素 1.什么是块级元素,什么是行内元素? 块级元素会独占一行 行内元素不会 ...
- Openresty最佳案例 | 第5篇:http和C_json模块
转载请标明出处: http://blog.csdn.net/forezp/article/details/78616672 本文出自方志朋的博客 http客户端 Openresty没有提供默认的Htt ...
- rank() over,dense_rank() over,row_number() over的区别
rank() over,dense_rank() over,row_number() over的区别 1.rank() over:查出指定条件后的进行排名.特点是,加入是对学生排名,使用这个函数,成绩 ...
- pl sql 存储过程、函数
存储过程用于执行特定的操作,当建立存储过程时,既可以指定输入参数(in),也可以指定输出参数(out),通过在过程中使用输入参数,可以将数据传递到执行部分:通过使用输出参数,可以将执行部分的数据传递到 ...
- spring mvc 拦截器(已完成)
1:ModelAndView @RequestMapping("/viewall")public ModelAndView viewAll(String name,String p ...
- Vue--- vue-Router 路由
文档 https://router.vuejs.org/zh-cn npm install vue-router --save 调用 import Vue from 'vue' import Vue ...