react动态增加state_react事件处理及动态样式添加

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

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 (

{// 选择金额按钮模块

this.state.lists.map(function(value,index,array){

return

key={'key'+index}

data={value.data}

addClass={this.state.addClass}

onClick={this.handleItemClick} >

}.bind(this))

}

);

}

});

// 悬赏金额按钮循环模块

var Item = React.createClass({

handleClick:function(){

this.props.onClick(this.props.data,this.props.addClass)

},

render:function(){

return (

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}元

)

}

});