锚标签未在React中调用onClick函数

Question

当您单击render方法内的锚标记时，我正在尝试更新组件状态。我已经尝试在构造函数内部进行绑定，但是仍未调用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

您需要e.preventDefault()在点击处理程序中。

它正在触发，但是锚的默认行为是刷新页面，因此它只是立即重新呈现。