錨標記不調用反應中的onClick函數

-1

我試圖在點擊呈現方法內的錨標記時更新我的組件狀態。我嘗試過在構造函數中綁定，但仍然沒有調用console.log。以下是我的代碼。請幫忙。這阻礙了我進步的大聲笑。錨標記不調用反應中的onClick函數

這是修改後的代碼，基於我以前的問題在這裏stackoverflow。

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

您使用過''href ='/''這就是爲什麼從'a'中刪除'href'或使用'href ='javascript：void（0）'' –

您的錨標籤有一個'href'。「onClick」不會觸發，因爲鏈接正在將您帶到另一個頁面。 – glhrmv

@MayankShukla我刪除了href，但仍然沒有顯示在控制檯中 – Dileet

檢查工作片段，無論是方式在工作，要麼刪除href或使用href='javascript:void(0)'控制檯打印在首頁點擊適當的值：

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

 
    setActiveTab(e) { 
 
     console.log(e.target); 
 
    } 
 

 
    render() { 
 
     return (
 
     <div className="nav-right nav-menu"> 
 
      
 
      <a onClick={this.setActiveTab}> 
 
       Home1 
 
      </a> 
 

 
      <br/> 
 

 
      <a href='javascript:void(0)' onClick={this.setActiveTab}> 
 
       Home2 
 
      </a> 
 
      
 
     </div> 
 
    ) 
 
    } 
 
} 
 

 
ReactDOM.render(<Navbar/>, document.getElementById('app'))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 
 

 
<div id='app'/>

來源

2017-05-31 18:37:02

嗯，這可能有什麼與我呈現在服務器上反應...因爲我看到它的工作原理，但它不工作在我的一端。 – Dileet

對不起，沒有關於服務器端渲染的想法。 –

你在點擊處理程序中需要e.preventDefault()。

它正在觸發，但錨的默認行爲是刷新頁面，所以它只是立即重新渲染。

來源

2017-05-31 18:50:14 aaronjkrause

錨標記不調用反應中的onClick函數

回答

相關問題