React 点击按钮显示div与隐藏div

<!DOCTYPE html>
<html><head><meta charset="UTF-8" /><title>React 点击按钮显示div与隐藏div</title><script src="https://unpkg.com/react@16/umd/react.development.js"></script><script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script><script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script><style type="text/css">.m-test{width: 100px;height: 100px;background-color: red;}</style></head><body><div id="root"></div><script type="text/babel">class Toggle extends React.Component {constructor(props) {super(props);this.state = {isToggleOn: true,dispaly: 'block'};// 这个绑定是必要的,使`this`在回调中起作用this.handleClick = this.handleClick.bind(this);}handleClick() {this.setState(prevState => ({isToggleOn: !prevState.isToggleOn,display: prevState.isToggleOn ? 'none': 'block'}));}render() {return (<div><button onClick={this.handleClick}>{this.state.isToggleOn ? 'ON' : 'OFF'}</button><div className="m-test" style={{display: this.state.display}}></div></div>);}}ReactDOM.render(<Toggle />,document.getElementById('root'));</script></body>
</html>

 

 

 

 

 

转载于:https://www.cnblogs.com/xutongbao/p/9924747.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/570182.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

For input string:

问题描述&#xff1a;在进行类型转换的时候&#xff0c;输入的字符串为空值造成的 解决方案&#xff1a;对字符串进行非空判断就可以&#xff0c;输入 if(str ! null && !.equals(str)){//类型转换; }

long型转String

long a1 12;String s1 a1 ""; // 法1&#xff1a;直接加空串System.out.println(s1);long a2 34;String s2 String.valueOf(a2); // 法2&#xff1a;String.valueOf()System.out.println(s2);long a3 56;String s3 Long.toString(a3); …

004-linux常用命令-权限管理命令

权限管理命令&#xff1a;chmod命令名称&#xff1a;chmod命令英文原意&#xff1a;change the permissions mode of a file命令所在路径&#xff1a;/bin/chmod执行权限&#xff1a;所有用户语法&#xff1a;chmod [{ugoa}{-}{rwx}] [文件或目录][mode421 ] [文件或目录]-R 递…

B cannot be cast to java.sql.Blob

问题描述&#xff1a;BLOB类型的数据从数据库提取出来&#xff0c;提示不能强制转换为BLOG 解决方案&#xff1a;转换为二进制数组 byte[] object (byte[]) Map.get("blob");

SSH-key连接原理

1&#xff0c;我们想通过远程的方式从我的电脑远程连接到对方的电脑上那么在LINUX系统下我们可以通过一种叫ssh的方式连接过去。SSH客户端&#xff08;ssh命令&#xff09;还包含一个很有用的远程安全拷贝命令scp。 2&#xff0c;有两种连接方式&#xff0c; &#xff08;1&…

byte[]和InputStream的相互转换

1、byte[]转换为InputStream InputStream sbs new ByteArrayInputStream(byte[] buf); 2、InputStream转换为InputStreambyte[] ByteArrayOutputStream swapStream new ByteArrayOutputStream(); byte[] buff new byte[100]; //buff用于存放循环读取的临时数据 int rc 0; …

[学习总结] python语言学习总结 (三)

函数闭包 定义 延伸了作用域的函数(能访问定义体之外定义的非全局变量 作用 共享变量的时候避免使用了不安全的全局变量允许将函数与某些数据关联起来,类似于简化版面向对象编程相同代码每次生成的闭包,其延伸的作用域都彼此独立(计数器,注册表)函数的一部分行为在编写时无法预…

jQuery中$.each()方法的使用

$.each()是对数组&#xff0c;json和dom结构等的遍历&#xff0c;说一下他的使用方法吧。 1、遍历一维数组 var arr1[aa,bb,cc,dd];//两个参数&#xff0c;第一个参数表示遍历的数组的下标&#xff0c;第二个参数表示下标对应的值$.each(arr1,function(i,val){console.log(ival…

【学习笔记】慕课网—Java设计模式精讲 第3章 软件设计七大原则-3-6 迪米特原则(最少知道原则)...

/** * 软件设计七大原则-迪米特原则 学习笔记 * author cnRicky * date 2018.11.10 */迪米特原则&#xff08;最少知道原则&#xff09; 一个对象应该对其他对象保持最少的了解。又叫最少知道原则 迪米特原则主要强调&#xff1a;尽量降低类与类之间的耦合 优点&#xff1a;降…

ORA-01745: 无效的主机/绑定变量名

问题描述&#xff1a;oracle中执行插入语句时报错 解决方案&#xff1a;缺失逗号

to_date , to_char

select sum(t.paid_fee)from order_payment_log twhere to_char(to_date(t.edit_time, yyyy-MM-dd HH24:mi:ss),yyyy-MM-dd) to_char(sysdate, yyyy-MM-dd)and t.paid_state Y; to_char to_char:将日期转换为字符串, to_char(to_date(t.edit_time, yyyy-MM-dd HH24:mi:ss),yy…

Duplicate local variable variable

问题描述&#xff1a;重复定义了变量。

mac/linux 解决启动命令行出现declare问题

问题描述&#xff1a;启动命令行时出现以下现象&#xff0c;如图所示&#xff1a; 问题解决&#xff1a; 在配置环境变量时&#xff0c;在某一行直接单独写了一个export,要么在bashrc中&#xff0c;要么在bash_profile等配置文件中&#xff0c;系统加载环境变量时就出现了上述情…

java 取Blob转为String

InputStream ins null;StringBuffer sb new StringBuffer();try {//blob要转换的Blob字段。ins blob.getBinaryStream();byte[] dis new byte[1024];int len 0;//开始处理流,并且显示while ((len ins.read(dis)) ! -1) {String disp new String(dis,0,len);sb.append(di…

分式递推

对于一类问题&#xff0c;比如是数列&#xff08;递推&#xff09;&#xff0c;然后给你两头的a[1]和a[n],如果含有分式&#xff0c;可以考虑乘过去&#xff0c;和一种二分的题目比较像&#xff0c;可能就会发现递推的规律&#xff0c;而且递推也可以只搞系数&#xff0c;没必要…

Blob和Clob的区别和用法

BLOB和CLOB都是大字段类型&#xff0c; 1、BLOB是按二进制来存储的&#xff0c;通常像图片、文件、音乐等信息就用BLOB字段来存储&#xff0c;先将文件转为二进制再存储进去。 2、CLOB是可以直接存储文字的&#xff0c;像文章或者是较长的文字&#xff0c;就用CLOB存储&#xf…

MVC 模式和模型 2

MVC框架 一个实现 MVC 模式的应用包含模型、视图、控制器 3 个模块&#xff1a; 模型&#xff1a;封装了应用的数据和业务逻辑&#xff0c;负责管理系统业务数据 视图&#xff1a;负责应用的展示 控制器&#xff1a;负责与用户进行交互&#xff0c;接收用户输入、改变模型、调整…

splite和map的结合使用

split() 方法用于把一个字符串分割成字符串数组。 Map 对象保存键值对。任何值(对象或者原始值) 都可以作为一个键或一个值。 作用&#xff1a;分割出来的字符串储存在map对象(key,value)中&#xff0c;便于前后台使用。 Map<String, Object> paramMap new HashMap<S…

Delphi与各数据库数据类型比较

Delphi数据类型与各数据库数据类型对比如下表&#xff0c;如有具体说明见表中脚注&#xff1a; Delphi Type Oracle Types SQL Server Types MySQL Types [1] InterBase Types PostgreSQL Types SQLite Types ftSmallint NUMBER(p, 0)[2] (p < 5) SMALLINT …

mybatis foreach collection

foreach的主要用在构建in条件中&#xff0c;它可以在SQL语句中进行迭代一个集合。 foreach元素的属性主要有 item&#xff0c;index&#xff0c;collection&#xff0c;open&#xff0c;separator&#xff0c;close。 item表示集合中每一个元素进行迭代时的别名&#xff0c;in…