react 给选中的 li 添加样式

最新推荐文章于 2023-06-28 14:34:52 发布

转载最新推荐文章于 2023-06-28 14:34:52 发布 · 829 阅读

1 ·

CC 4.0 BY-SA版权

原文链接：https://www.cnblogs.com/liangshuang/p/9237552.html

文章标签：

#react

react 专栏收录该内容

12 篇文章

订阅专栏

本文介绍了一种在React中实现导航栏选中项样式的方法。通过事件委托和状态管理，当点击不同的导航项时，可以为其添加或移除特定的样式类。此方案适用于动态更新多个导航项的状态。

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