react使用原生js獲取點擊的ul下的第幾個li 並設置className爲active

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），而非父層。