設置標籤爲激活使用React

我使用React作爲模板引擎進行表達，並嘗試將CSS類添加到適當的錨點元素。設置標籤爲激活使用React

我目前通過控制器傳回請求路徑到導航欄組件。以下是我的代碼。我覺得我是如此接近....

更新的代碼（2017年5月31日）：

const React = require('react'); 


class Navbar extends React.Component { 
    constructor(...props) { 
    super(...props); 
    this.setActiveTab = this.setActiveTab.bind(this) 
    this.state = { 
     currentPage: "/" 
    } 
    } 

    setActiveTab(e) { 
    console.log(e.target) 
    this.setState({ 
     currentPage: e.target.href 
    }) 
    } 

    render() { 
    const { path } = this.props 
    let classString = path === this.state.currentPage ? 'nav-item is-tab is-active' : 'nav-item is-tab' 

    return (
     <nav className="nav"> 

     <div className="nav-left"> 
      <a className="nav-item"> 
      <h1>CREATORS NEVER DIE</h1> 
      </a> 
     </div> 

     <div className="nav-right nav-menu"> 
      <a href="/" className={classString} onClick={this.setActiveTab}> 
      Home 
      </a> 
     </div> 


     </nav> 
    ) 
    } 
} 

module.exports = Navbar;

來源

2017-05-31 Dileet

什麼是你所面對的錯誤？ –

@VikramSaini目前沒有面臨任何錯誤。這顯示在控制檯中：console.log（「路徑與currentPage相同」）。我不確定接下來要執行的步驟將類添加到正確的錨標記 – Dileet

好的，你能解釋一下你想達到什麼嗎？ –

有多種方式來實現這一目標。

我不知道很多關於你的應用程序的其餘部分，但是這是一般的方法，你將不得不採取：

首先修改checkActiveTab返回一個布爾值，如果是活動路徑：

checkActiveTab = (path) => { 
return path === this.state.currentPage; 
}

（旁註：你包括你的全成分我不知道它是如何工作的檢查this.state因爲你沒有約束力this到checkActiveTab功能）

下一頁時幽人明鏡標籤，你會檢查它是否是當前頁面，那麼我們將設置活動類：

<a href="/" className={`nav-item is-tab ${ this.checkActiveTab('Home') ? 'is-active' : '' }`}> 
    Home 
</a>

來源

2017-05-31 05:01:27

我確實包括我的完整組件。我將如何將狀態更改爲當前頁面？ – Dileet

我剛更新了問題中的代碼。我創建了一個函數來設置狀態onClick，但它似乎並沒有註冊，因爲我沒有獲取控制檯日誌集函數內。 – Dileet

這是因爲您使用的是定位標記，導致瀏覽器轉到新頁面，並且組件將再次掛載。 –

，如果我是這樣的，我可以這樣

我會犯這樣的已經做到了這一點導航作爲組件與一些邏輯添加活動類。

const Nav = (props) => { 
    let classString = props.isActive ? 'nav-item is-tab is-active' : 'nav-item is-tab' 
    return (<div className="nav-right nav-menu"> 
      <a href={props.path} className={classString}> 
      Home 
      </a> 
     </div> 
    ) 
}

現在你可以編寫基於在父組件檢查導航組件發送路徑和isActive布爾邏輯。

基於URL我可以確定哪些Nav將isActive道具視爲true。

例如

<Nav path={this.props.path} isActive ={this.props.path === this.state.currentPage} </Nav>

來源

2017-05-31 05:21:04

已更新我的代碼。父級沒有關於當前頁面的導航欄的狀態。所以我們應該繼續使用導航欄組件。我目前的問題是當我點擊適當的鏈接時更新導航欄狀態。現在，當我按Home鏈接時，我沒有獲取在該函數中設置的console.log。 – Dileet

設置標籤爲激活使用React

回答

相關問題