react className 样式控制
1.<div className={ "formbox " + this.state.classArr }></div>
2. this.state.classArr = [];
<div className={ "formbox " + this.state.classArr.jion(" ") }> </div>
this.state.classArr.pop()
this.state.classArr.push(".demo") 可以更改class 页面也会出发更新
Like (){
this.setState({
isLike:!this.state.isLike
});
console.log(11);
}
<span className="like" onClick={ this.Like }><span className={ this.state.isLike ? 'active iconfont' : 'iconfont' } ></span>喜欢</span>
react className 样式控制的更多相关文章
- react className 有多个值时的处理 / react 样式使用 百分比(%) 报错
1.react className 有多个值时的处理 <fieldset className={`${styles.formFieldset} ${styles.formItem}`}> ...
- HTML5 progress元素的样式控制、兼容与实例
一.progress元素基本了解 基本UIprogress元素属于HTML5家族,指进度条.IE10+以及其他靠谱浏览器都支持.如下简单code: <progress>o(︶︿︶)o< ...
- vue样式控制的方式
创建vue对象: 1.样式控制第一种方式: 直接传递一个数组,注意: 这里的 class 需要使用 v-bind 做数据绑定. 2.样式控制第二种方式: 在数组中使用三元表达式 3.样式控制第三种方 ...
- css 样式控制文本过长实现省略号
css 样式控制文本过长实现省略号 .topicTitle{ text-overflow: ellipsis; max-width: 75%; overflow: hidden; white-spac ...
- xadmin站点管理面样样式控制
xadmin可以使用的页面样式控制基本与Django原生的admin一直. list_display 控制列表展示的字段 search_fields 控制可以通过搜索框搜索的字段名称,xadmin使用 ...
- php部分:网页中报表的打印,并用CSS样式控制打印的部分;
网页中报表的打印,是通过调用window对象中的print()方法实现打印功能的: 调用浏览器本身的打印功能实现打印 <a href="#" onclick="wi ...
- quick bi dashboard 控件样式控制。
控件样式控制 1 想要的效果图 2 查询样式里面进行设置
- JQuery学习:事件绑定&入口函数&样式控制
1.基础语法学习: 1.事件绑定 2.入口函数 3.样式控制 <!DOCTYPE html> <html lang="en"> <head> & ...
- react添加样式的四种方法
React给添加元素增加样式 第一种方法: <!DOCTYPE html> <html lang="en"> <head> <meta c ...
随机推荐
- 11个免费的Web安全测试工具
1.Netsparker Community Edition(Windows) 这个程序可以检测SQL注入和跨页脚本事件.当检测完成之后它会给你提供一些解决方案. 2.Websecurify(Wind ...
- 第二百三十四节,Bootstrap表单和图片
Bootstrap表单和图片 学习要点: 1.表单 2.图片 本节课我们主要学习一下 Bootstrap 表单和图片功能,通过内置的 CSS 定义,显示各 种丰富的效果. 一.表单 Bootstrap ...
- JS刷新页面后滚动条的位置不变
有时候,在网页中点击了页面中的按钮或是刷新了页面后,页面滚动条又 会回到顶部,想看后面的记录就又要拖动滚动条,或者要按翻页键,非常不方便,想在提交页面或者在页面刷新的时候仍然保持滚动条的位置不变,最好 ...
- (转)Apache Mina网络框架
转自1:整体结构分析 http://www.cnblogs.com/xuekyo/archive/2013/03/06/2945826.html 转自2:详细源码分析 http://www.cnblo ...
- Autorotation and Autosizing
配置应用级别的旋转方向——Global Setting 方法:点击项目-General-Deployment-Device Orientation It doesn’t necessarily mea ...
- 转载: Flex 布局教程
demo:页面二等分 .flex-box { display: -webkit-flex; /* Safari */ display: flex; flex-direction: row; justi ...
- angularJS中的ng-show、ng-if指令
angularJS中的ng-show.ng-hide.ng-if指令都可以用来控制dom元素的显示或隐藏. 1. ng-show和ng-hide 根据所给表达式的值来显示或隐藏HTML元素.元素会渲染 ...
- jQuery animate() - 使用相对值 在值的前面加上 += 或 -=
也可以定义相对值(该值相对于元素的当前值).需要在值的前面加上 += 或 -=: 实例 $("button").click(function(){ $("div" ...
- PHP使用SimpleElement创建和解析xml文件
<!-- 使用SimpleXMLElement生成xml文件 --><?php//生成一个xml文件 //xml字符串$_xml = <<<_xml<?xml ...
- NW.js 入坑指南
NW.js是什么? NW.js 是基于 Chromium 和 Node.js 运行的, 以前也叫nodeWebkit.这就给了你使用HTML和JavaScript来制作桌面应用的可能.在应用里你可以直 ...