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