Anchor 标签没有调用 React 中的 onClick 函数答案

【问题标题】：Anchor tag isn't calling the onClick function in ReactAnchor 标签没有调用 React 中的 onClick 函数
【发布时间】：2017-11-01 16:42:42
【问题描述】：

当您单击渲染方法中的锚标记时，我正在尝试更新我的组件状态。我已经尝试在构造函数中进行绑定，但仍然没有调用 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;

【问题讨论】：

你使用了href='/'这就是为什么，从a中删除href或使用href='javascript:void(0)'
您的锚标记有一个href。 onClick 不会触发，因为链接会将您带到另一个页面。
@MayankShukla 我删除了 href，但控制台中仍然没有显示任何内容
@dileet.. 你的问题得到答案了吗？你做了什么让它发挥作用？

标签： javascript node.js reactjs express

【解决方案1】：

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

它正在触发，但锚点的默认行为是刷新页面，所以它只是立即重新渲染。

【讨论】：

我们应该在哪里调用它？我的 onClick 处理程序没有任何对 e 或类似内容的引用。
handleClick = (e) => { e.preventDefault(); console.log('链接被点击'); };
@44kksharma 它将在 URL 中推送额外的 #。使用 href='javascript:void(0)' 而不是 href="#"

【解决方案2】：

检查工作的sn-p，两种方式都可以工作，要么删除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'/>

【讨论】：

嗯，这可能与我在服务器上渲染反应有关...因为我看到它有效，但它对我来说不起作用。
抱歉，对服务器端渲染一无所知。

【解决方案3】：

研究出现的问题，您需要防止锚标记的默认设置。此外，如果您创建一个箭头函数，您可以处理这个。

可以在 React 文档 here 上找到阻止默认信息

希望这会有所帮助。

 const React = require("react");

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

    setActiveTab = (e) => {
        e.preventDefault();
        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;

【讨论】：