react 給選中的li添加樣式

思路：使用事件委托，
關鍵：獲取到的index必須轉為數字，因為它是字符串

handleClick = (e) => {
        const nodeName = e.target.nodeName.toUpperCase()
        let tag = e.target;
        if (nodeName === 'LI') {
            let index = parseInt(tag.getAttribute('index'))
            this.setState({
                currentIndex: index
            })
        }
    }

import React from 'react'
import './nav.scss'

class NavCom extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            currentIndex: 0
        }
    }
    sestCurrentStyle = (index) => {
        return this.state.currentIndex === index ? 'current' : ''
    }
    handleClick = (e) => {
        const nodeName = e.target.nodeName.toUpperCase()
        let tag = e.target;
        if (nodeName === 'LI') {
            let index = parseInt(tag.getAttribute('index'))
            this.setState({
                currentIndex: index
            })
        }
    }
    render() {
        const navList = this.props.navList
        return (
            <div className='nav-wrap' onClick={(e)=>this.handleClick(e)}>
                {
                    navList && navList.map( (item, index) => {
                        return (
                            <li key={index} index={index} className={this.state.currentIndex === index ? 'current' : ''}>{item}</li>
                        )
                    })
                }
            </div>
        )
    }
}
export default NavCom