ReactJS: NavBar

Question

我试着在纳瓦巴认识到改变语言的可能性。我使用了这个代码：

<div className="nav-mobile">
        <div className="link-list-wrapper collapse" id="menu1">
          <nav>
                  <ul className="link-list">
                    <li><a className="list-item " onClick={this.changeLan.bind(this, this.ita)}>ITA</a></li>
                    <li><a className="list-item " onClick={this.changeLan.bind(this, this.eng)}>ENG</a></li>
                  </ul>
          </nav>
        </div>
      </div>

我想问你：

1. 如何激活导航栏中的语言选项(不是在站点中，仅在导航栏中)？我读过这样做的可能性： <li><a class="list-item" href="#">Link 1</a></li> <li><a class="list-item active" href="#">Link 2 Active</a></li>

但是我只想“激活”按钮，而不是总是像在代码中那样活动。

1. ，你知道为什么当我把鼠标传递到这个链接上时，会出现这样的情况吗？因为它不是链接。

​

​

Answer 1

为选定的语言名称it lang创建一个状态，例如

const { lang } = this.state
...

<li>
  <a 
    className={`list-item ${lang === 'ita' ? 'active': ''}`} 
    onClick={this.setState({lang: 'ita'})}
  >
  ITA
  </a>
</li>
<li>
  <a 
    className={`list-item ${lang === 'en' ? 'active': ''}`} 
    onClick={this.setState({lang: 'en'})}
  >
  ENG
  </a>
</li>

然后，您只需要为类active编写css，第二个问题就是更改li标记的hover css。

Answer 2

假设在this.changeLan中，您将属性this.active更改为this.ita或this.eng：您可以尝试

<li>
  <a 
    className={`list-item ${this.active === this.ita ? 'active': ''}`} 
    onClick={this.changeLan.bind(this, this.ita)}
  >
  ITA
  </a>
</li>
<li>
  <a 
    className={`list-item ${this.active === this. eng ? 'active': ''}`} 
    onClick={this.changeLan.bind(this, this. eng)}
  >
  ENG
  </a>
</li>