shinem-tab v0.2.2

选项卡/Tab

使用

import React from 'react'
import ReactDOM from 'react-dom'
import Tab from '@xm/Tab'
import styles from './index.scss'

class App extends React.Component {
  constructor (props) {
    super(props)

    this.state = {
      tabs: [
        {
          value: 1,
          text: 'tab1',
          active: true
        },
        {
          value: 2,
          text: 'tab2'
        }
      ]
    }

    this.handleClick = this.handleClick.bind(this)
    this.addTab = this.addTab.bind(this)
  }

  handleClick (tab) {
    const {tabs} = this.state

    tabs.forEach((t) => {
      if (t.active) {
        delete t.active
      }

      if (t.value === tab.value) {
        t.active = true
      }
    })

    this.setState({
      tabs
    })
  }

  addTab () {
    const {tabs} = this.state
    const v = tabs[tabs.length - 1].value + 1
    tabs.push({
      value: v,
      text: `tab${v}`
    })

    this.setState({
      tabs
    })
  }

  render () {
    const {tabs} = this.state

    return (
      <div>
        <Tab cls={styles['custom-tabs']} toEach={tabs} onChange={this.handleClick} />
        <button onClick={this.addTab}>添加</button>
      </div>
    )
  }
}

window.addEventListener('DOMContentLoaded', () => {
  ReactDOM.render((<App />), document.body)
})