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. Playrix Codescapes Cup (Codeforces Round #413, rated, Div. 1 + Div. 2) C. Fountains 【树状数组维护区间最大值】

    题目传送门:http://codeforces.com/contest/799/problem/C C. Fountains time limit per test 2 seconds memory ...

  2. 打开eclipse出现an error has occurred.see the loh file

    解决方案: 1,打开eclipse安装目录下的eclipse.ini文件:2,打开的文本文件最后添加一行--add-modules=ALL-SYSTEM3,保存重新打开Eclipse. 测试过已经ok

  3. 解决Sublime Text乱码问题

    第一步:安装Package Control 大家如果是在官网下载的Sublime Text 3,那么首先需要安装一个 Package Control包,这是一个用来安装其他插件的包,不管装什么插件,首 ...

  4. html基础用法(上)

    html的定义: html超文本标记语言,标准通用标记语言下的一个应用. “超文本”就是指页面内可以包含图片,链接,甚至音乐,程序等非文字语言. 超文本标记语言的结构包括“头”部分(head),和“主 ...

  5. Python Json模块中dumps、loads、dump、load函数介绍哦

    来自: https://www.jb51.net/article/139498.htm 1.json.dumps()       json.dumps()用于将dict类型的数据转成str,因为如果直 ...

  6. c# 任务超时执行

    最近整理下各类框架,学习一下欠缺的东西.因为前一年开发过java服务端,知道java有很多开源框架,但是毕竟起来也很累. 现在转回头从新审视c#,很基础,没有开源框架,因为以前它不开源,所以少,不用比 ...

  7. 纯css实现移动端横向滑动列表

    前几天在公司做开发的时候碰到一个列表横向滑动的功能,当时用了iscroll做,结果导致手指触到列表的范围内竖向滑动屏幕滑动不了的问题. 这个问题不知道iscroll本身能不能解决,当时选择了换一种方式 ...

  8. [洛谷]P3704-数字表格

    [洛谷]P3704-数字表格 妙啊,这又是一道反演题,而且个人感觉比较高级 传送门 大意 在\(N\times M\)的数表\(a\)中,\(a_{i,j}\)表示f((i,j)),其中\((i,j) ...

  9. windows下openresty中使用lua做接口转发、二次封装等

    需求:根据客户需求,可以在ngx下 通过lua做接口二次封装再次转发给用户或第三方 场景:对返回值有要求的.接口屏蔽字段.或做一些业务上的验证等 1.windows直接下载openresty 解压即可 ...

  10. maven项目打包后war文件丢失配置文件

    使用maven package打包项目时出现配置文件丢失的现象,此类问题解决办法如下: 在web项目pom.xml 文件中添加如下: 在<build>标签中添加如下配置: <reso ...