如何在reactJs中檢測包含特定類的子節點？

Question

我通過 reactJS 完成了這個渲染

使成為（） {

    return (
      <div>
        <Router>
          <div className="wrapper2">
            <nav id="menu-principal" className="main menu-principal">
              <ul>
                <li><NavLink className="home-link" exact to="/">início</NavLink></li>
                <li><NavLink exact to="/nota_biografica">nota biográfica</NavLink></li>

              </ul>
            </nav>
            <div className="page-content">
              <Route exact path='/nota_biografica' render={() => <NotaBiografica />} />                  
              <Route exact path='/' render={() => <Home />} />
            </div>
          </div>
        </Router>
      </div>
    )
  }

當我單擊包含“home-link”類的鏈接時，我想做一些操作。 就像我在下面的示例中嘗試做的一個動作一樣，但它不起作用。 我該如何解決？ 謝謝你。

var el = document.querySelector(".menu-principal");
      el.onclick = (event) => {                 
        for(var i = 0; i < el.childNodes.length; i++) {
          if(el.childNodes[i].className === "home-link"){
            alert('true')
          }
        }
      }

Answer 1

因為您定位的元素是<NavLink>標簽，通常應該導航到另一個路由器頁面，所以我相信您附加的事件不會運行。 我建議您不要使用<NavLink>而是在onClick處理程序上使用this.props.history.push('/path/to/route') （在導航到另一個路由地址之前需要運行的程序之后）。

在以下示例中，請注意withRouter並將<NavLink>更改為 span 然后將onHomeCLick處理程序附加到它：

import React, {Component} from 'react';
import {withRouter, Route, BrowserRouter as Router} from "react-router-dom";
class YourComponent extends Component {

  onHomeCLick = () => {
    //DO something here prior to router navigation of ".home-link" element

    this.props.history.push( '/' );
  };

  render(){
    return (
      <div>
        <Router>
          <div className="wrapper2">
            <nav id="menu-principal" className="main menu-principal">
              <ul>
                <li><span className="home-link" onClick={this.onHomeCLick}>início</span></li>
                <li><NavLink exact to="/nota_biografica">nota biográfica</NavLink></li>

              </ul>
            </nav>
            <div className="page-content">
              <Route exact path='/nota_biografica' render={() => <NotaBiografica />} />
              <Route exact path='/' render={() => <Home />} />
            </div>
          </div>
        </Router>
      </div>
    )
  }

}

export default withRouter( YourComponent );

更新============

如果您喜歡使用<NavLink>另一個技巧，唯一的解決方案是“回調”方式。 一旦您導航到路線，它就會觸發（我仍然看不到在導航之前是否有辦法做到這一點）。 開始了：

import React, {Component} from 'react';
import {Route, BrowserRouter as Router} from "react-router-dom";

class YourComponent extends Component {

  isActive= (match, location) => {
    if (match) {
      console.log('Hi i am active, do something here');
    }
    return match;
  };

  render(){
    return (
      <div>
        <Router>
          <div className="wrapper2">
            <nav id="menu-principal" className="main menu-principal">
              <ul>
                <li><NavLink className="home-link" activeClassName="active" isActive={this.isActive}>início</NavLink></li>
                <li><NavLink exact to="/nota_biografica">nota biográfica</NavLink></li>

              </ul>
            </nav>
            <div className="page-content">
              <Route exact path='/nota_biografica' render={() => <NotaBiografica />} />
              <Route exact path='/' render={() => <Home />} />
            </div>
          </div>
        </Router>
      </div>
    )
  }

}

export default YourComponent;