react使用原生js获取点击的ul下的第几个li 并设置className为active

最新推荐文章于 2024-01-31 17:38:04 发布

原创最新推荐文章于 2024-01-31 17:38:04 发布 · 7.4k 阅读

3 ·

CC 4.0 BY-SA版权

react 同时被 2 个专栏收录

3 篇文章

订阅专栏

原生js

1 篇文章

订阅专栏

本文介绍了一个使用React实现的导航菜单组件，通过管理组件状态来切换菜单项的激活状态，并利用React-Router进行页面跳转。文章强调了在事件处理中正确使用this指针的重要性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

import React from 'react'
import './index.less';
import { Link } from "react-router-dom";

class Index extends React.Component {
    state = {
        current: 1,
      }
    render () {
        return (
            <div id="menu">
                <ul id="menu-list" onClick={this.getHoverIndex}>
                    <li className="active"><Link to="/">首页</Link></li>
                    <li><Link to="/shop">商品</Link></li>
                    <li><Link to="/set">设置</Link></li>
                    <li><Link to="/salePhone">出货详情</Link></li>
                </ul>
            </div>
        );
    }
    getHoverIndex = (e) => {
        var _this = this;
        var ul_menu = document.getElementById("menu-list");
        var li_list = ul_menu.getElementsByTagName("li");
        for( var i = 0, len = li_list.length; i < len; i ++ ){
            li_list[i].className = '';
            li_list[i].index = i;
            li_list[i].onclick = function() {
                _this.setState({
                    current: this.index,
                });
            }
            li_list[this.state.current].className = 'active';
        }
    }
}
export default Index

话不多说，直接上代码吧。

其中必须定义var _this=this，直接使用this的话指向的是函数本身（无法使用setState），而非父层。