点击切换

完整es6代码如下，实现类似于button切换效果

import React, {
    Component
} from 'react';

// 一触发setState就会重新渲染render 组件  初始渲染的时候第一个li 相等，所以class为focused，后面的为
// 点到第二个li 触发setState focused变为2
export default class Tab extends Component {
    state = {
        focused: 0
    };
    handleClick = (index) => {
        this.setState({
            focused: index
        });
    };
    render() {
        const items = ['webpack', 'react', 'babel', 'npm'];
        const {
            focused
        } = this.state;
        var that = this;
        return (
            <div className='content'>
            <ul>
                  { 
                items.map(function(item,index){
                    return (<li key={index} 
                        className={focused === index ? 'focused ': 'normal'}
                        onClick={that.handleClick.bind(null,index)}
                        >{item}</li>)
                   })
                  }
                    </ul>
            </div>
        )
    }
}
export default Tab