cjd-parkball/src/components/multiSwitch/index.js

> 中后台业务组件库，中后台就像公园，进入需要买门票（登录），所以以 Parkball(公园球) 命名，公园内必定捕获！作为一个组件库，提供使用方法文档，方便开发者的调用

import React from 'react'
import { Icon } from 'antd'
import update from 'immutability-helper'
import './index.scss'

const AddIcon = props => (<div className="header__icon">{props.title}<Icon type="bars" /></div>)
/* eslint-disable react/no-multi-comp */
class MultiSwitch extends React.Component {
  constructor (props) {
    super(props)
    this.onSwitchItemClick = this.onSwitchItemClick.bind(this)
    this.state = {
      activeIndex: 0,
    }
  }

  onSwitchItemClick (index, target) {
    const { onSwitch } = this.props
    const { activeIndex } = this.state
    this.setState({
      activeIndex: index,
    })
    if (activeIndex !== index) {
      onSwitch(index, target)
    }
  }

  render () {
    const { dataSource } = this.props
    const { activeIndex } = this.state
    return (
      <div className="pk-switch">
        {dataSource.map((i, index) => <span className={index === activeIndex ? 'pk-switch__item pk-switch--active' : 'pk-switch__item'} key={i.name} onClick={this.onSwitchItemClick.bind(this, index)}>{ i.name }</span>)}
      </div>
    )
  }
}

export default MultiSwitch