アンカータグがリアクションのonClick関数を呼び出さない

Question

レンダリングメソッド内でアンカータグをクリックしたときにコンポーネントの状態を更新しようとしています。私はコンストラクタ内でバインドしようとしましたが、console.logはまだ呼び出されていません。以下は私のコードです。助けてください。これは、笑って進んで私を抱きしめている。

これは私の前の質問に基づいて変更されたコードはここに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; 

Answer 1

、作業スニペットを確認し、両方の方法が作業している、のいずれか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'/>

Answer 2

Clickハンドラにe.preventDefault()が必要です。

アンカーのデフォルトの動作はページを更新することです。ただすぐに再レンダリングするだけです。