多数据的事件绑定,循环数据来进行绑定。如下方式就是循环绑定事件的基本代码:

this.state.lists.map(function(value,index,array){
//代码片段
}.bind(this))

这里是一块事件绑定的例子,可以点击按钮,点击的那个按钮来实现选中的状态,并且可获取点击按钮的值:
var Ask = React.createClass({
getInitialState: function() {
return {
lists:[ //初始化button里面的值,即钱的值
{data:8},
{data:28},
{data:88}
],
addClass: false //用于添加class
}
},
handleItemClick:function(item,addClass){
var that = this; // 点击按钮改变样式
that.setState({
addClass: item
}); },
render: function() {
return ( <AMUIAvgGrid sm={2} className="am-thumbnails"> { // 选择金额按钮模块
this.state.lists.map(function(value,index,array){
return <Item
key={'key'+index}
data={value.data}
addClass={this.state.addClass}
onClick={this.handleItemClick} ></Item>
}.bind(this))
} </AMUIAvgGrid> );
}
}); // 悬赏金额按钮循环模块
var Item = React.createClass({
handleClick:function(){
this.props.onClick(this.props.data,this.props.addClass)
},
render:function(){
return (
<li>
<AMUIButton
amStyle="secondary"
className={this.props.addClass == this.props.data ? 'am-icon-check' : ''}
//this.props.addClass == this.props.data相等的话就显示am-icon-check样式
//this.props.data可以跟踪具体是哪一个button
//点击事件里面会传this.props.addClass过去,这个值的可随意设置一个初始值默认
//例如我在getInitialState方法里面传入的是false
//在handleItemClick方法里面可以确定具体点击的哪一个button
//当点击按钮的时候会将点击的当前按钮的this.props.data赋值给对应的this.props.addClass
//这时候class就可以动态切换了
block
onClick={this.handleClick}>
{this.props.data}元
</AMUIButton>
</li>
)
}
});

  

react事件处理及动态样式添加的更多相关文章

  1. 前端笔记之React(三)使用动态样式表&antd&React脚手架&props实战

    一.使用动态样式表 1.1 LESS使用 全局安装Less npm install -g less 创建1.less文件,然后可以用lessc命令来编译这个文件: lessc 1.less 1.css ...

  2. 深入理解脚本化CSS系列第五篇——动态样式

    前面的话 很多时候,DOM操作比较简单明了,因此用javascript生成那些通常原本是HTML代码生成的内容并不麻烦.但由于浏览器充斥着隐藏的陷阱和不兼容问题,处理DOM中的某些部分时要复杂一些,比 ...

  3. DOM动态脚本和动态样式

    动态脚本 [定义] 在页面加载时不存在,但将来的某一时刻通过修改DOM动态添加的脚本. [方式] [1]插入外部文件方式 var script = document.createElement(&qu ...

  4. Less (一种动态样式语言)

    Less (一种动态样式语言). LESS是一种由Alexis Sellier设计的动态层叠样式表语言,受Sass所影响,同时也影响了 Sass的新语法:SCSS. LESS是开源的,其第一个版本由R ...

  5. vue中动态样式不起作用? scoped了解一下

    vue中style标签使用属性scoped的注意事项 style上添加属性scoped可以实现样式私有化,但是在使用动态样式时,样式会不起作用.可以先去掉scoped

  6. DOM操作技术之动态脚本与动态样式(兼容版)

    动态脚本 使用<script>元素可以向页面中插入Javascript代码,一种方式是通过其src特性包含外部文件,另一种方式就是用这个元素本身来包含代码. 而我们要说的动态脚本,指的是在 ...

  7. less 一种 动态 样式 语言

    LESS « 一种动态样式语言 http://www.bootcss.com/p/lesscss/ 一种 动态 样式 语言. LESS 将 CSS 赋予了动态语言的特性,如 变量, 继承,运算, 函数 ...

  8. vue基础-动态样式&表单绑定&vue响应式原理

    动态样式 作用:使用声明式变量来控制class和style的值 语法: :class/:style 注意:尽可能不要把动态class和静态class一起使用,原因动态class起作用的时间会比较晚,需 ...

  9. winform 用户控件、 动态创建添加控件、timer控件、控件联动

    用户控件: 相当于自定义的一个panel 里面可以放各种其他控件,并可以在后台一下调用整个此自定义控件. 使用方法:在项目上右键.添加.用户控件,之后用户控件的编辑与普通容器控件类似.如果要在后台往窗 ...

随机推荐

  1. PHP使用MySQL报no such file or directory

    原因是没有连接数据库.加上下面代码: $link = mysql_connect(DB_HOST,DB_USER,DB_PWD);mysql_select_db(DB_NAME) or die('Co ...

  2. 【BZOJ4025】二分图(LCT动态维护图连通性)

    点此看题面 大致题意: 给你一张图以及每条边的出现时间和消失时间,让你求每个时间段这张图是否是二分图. 二分图性质 二分图有一个比较简单的性质,即二分图中不存在奇环. 于是题目就变成了:让你求每个时间 ...

  3. B. Qualifying Contest_排序

    B. Qualifying Contest time limit per test 1 second memory limit per test 256 megabytes input standar ...

  4. nodejs的一些概念

    上一节我们几乎是扫通http请求和响应的整个闭环,包括请求时候的头信息和服务器返回时候的头信息和状态码等等,这些在node的http中都能获取到,并且有相应都接口组装这些信息和返回它们,同时这些htt ...

  5. @RequestMapping,@ResponseBody,@RequestBody用法

    本文转载:http://blog.csdn.net/ff906317011/article/details/78552426 1.@RequestMapping 国际惯例先介绍什么是@RequestM ...

  6. 2018.8.2 Juint测试介绍及其命名的规范

    JUnit - 测试框架 什么是 Junit 测试框架? JUnit 是一个回归测试框架,被开发者用于实施对应用程序的单元测试,加快程序编制速度,同时提高编码的质量.JUnit 测试框架能够轻松完成以 ...

  7. python2.7 加密模块 解决各种坑

    1 Python27 安装crypto Windows安装 在Windows上安装的时候直接 pip install pycrypto会报错,参考:http://blog.csdn.net/teloy ...

  8. Linux操作系统下的三种Java环境配置方法

    方法1:修改/etc/profile 文件  所有用户的 shell都有权使用这些环境变量 (1)在 shell终端执行命令:vi /etc/profile (2)在 profile文件末尾加入: e ...

  9. python-类对象以列表切片模式操作

    #类对象以列表切片模式操作 class Person: def __init__(self): self.cache=[] def __setitem__(self, key, value): #修改 ...

  10. 【Java-Method】读《重构》有感_Java方法到底是传值调用还是传引用调用(传钥匙调用)

    今天读<重构>P279, Separate Query from Modifier,将查询函数和修改函数分离. 问题的产生 突然想到 Java 的传对象作为参数的方法到底是 传引用调用,还 ...