javascript - 使用 React 将选项卡设置为事件状态

Question

我使用 React 作为 Express 的模板引擎，并尝试将 css 类添加到适当的 anchor 元素。

我当前正在通过 Controller 将请求路径传回导航栏组件。下面是我的代码。我觉得我已经很接近了......

更新代码(2017 年 5 月 31 日):

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

有多种方法可以实现这一点。

我对应用程序的其余部分了解不多，但这是您必须采取的一般方法:

首先修改checkActiveTab以返回 bool 值(如果是事件路径):

checkActiveTab = (path) => {
 return path === this.state.currentPage;
}

(旁注:您是否包含了完整的组件？我不确定检查 this.state 是如何工作的，因为您没有将 this 绑定(bind)到 checkActiveTab 函数)

接下来，当您渲染选项卡时，您将检查它是否是当前页面，然后我们将设置一个事件类:

<a href="/" className={`nav-item is-tab ${ this.checkActiveTab('Home') ? 'is-active' : '' }`}>
  Home
</a>