Question

当您在render方法中单击锚标记时，我正在尝试更新组件状态。我已经尝试在构造函数中绑定，但仍然没有调用console.log。以下是我的代码。请帮忙。这阻碍了我的进步lol。

这是基于我之前关于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

研究出现的问题，您需要防止锚标记的默认设置。另外，如果创建箭头功能，则可以处理此功能。

可以在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;

Answer 2

检查工作代码段，两种方法都有效，要么删除request('http://example.com/api/post/1') .then((response) => { // "response" has whatever you returned from global handler }) .catch((err) => { // "err" is whatever you've thrown from global handler });，要么使用href控制台在点击Home时打印正确的值：

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'))

Answer 3

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

它被解雇但是锚的默认行为是刷新页面，所以它只是立即重新渲染。

Anchor标签没有在React中调用onClick函数

3 个答案: