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

转载于:https://www.cnblogs.com/liangshuang/p/9237552.html