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 (

			<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>
             )
      }
});