store-ui/tag-menu.js

store-ui

/**
 * @desc
 *
 * @使用场景
 *
 * @author  杨晓东[of1081]
 * @company qianmi.com
 * @Date    15/7/28
 **/
'use strict';

var React = require('react');
var Immutable = require('immutable');
var PureRenderMixin = require('react/addons').addons.PureRenderMixin;

 var TagMenu = React.createClass({
   mixins: [PureRenderMixin],

  /**
   * 初始化属性
   */
   getDefaultProps(){
     return {
	     menus:[],//数组
	     defaultShowIndex:0,
	     onTagChange:(index)=>{}
     }
   },
  /**
   * 初始化状态
   */
   getInitialState (){
       return  {
	       showIndex:this.props.defaultShowIndex
       };
   },


  /**
   * 绑定自定义事件
   */
  componentDidMount() {
  },


  /**
   * remove自定义事件
   */
  componentWillUnmount() {
  },


  /**
   * virtualdom
   * @returns {XML}
   */
  render() {

    return ( <div className="tagMenu order-menu">
			    <ul className="menu clearfix">
				    {this.props.menus.map((menuItem,index)=>{
					    return  <li className={this.state.showIndex == index ? "current":null} onClick={this._clickOne.bind(this,index)}>{menuItem}</li>
				    })
				    }
			    </ul>
		    </div>
    );
  },


	 /**
	  * 点击一个时
	  */
	 _clickOne(index){
		 this.setState({showIndex:index});
		 this.props.onTagChange(index);
	 }
});

 module.exports=TagMenu;