reactjs - 如何更改点击 react 的类(class)？

Question

代码如下:

state: {
    button: "notclicked"
}

changeclass = () => {
    this.setState({ button: "clicked" })
} 

<ul>  
    <li className="linkactive">
        <a class="vote-up-off" onClick={ this.changeclass } href="/">
            <Icon className={ this.state.button } className=" fa fa-area-chart"/>
        </a>
    </li>
    <li>
        <a class="vote-up-off"href="/">
            <Icon className="fa fa-bar-chart fa-2x"/> 
        </a>
    </li>
    <li>
        <a class="vote-up-off" href="/>
            <Icon className="fa fa-line-chart"/>
        </a>
    </li>
</ul>

我可以通过单击 <li> 来更改类(class), 但在点击另一个 <li> ，如何让上一节课回到notclicked ？

我想向用户显示他当前所在的标签页

Answer 1

现在你的 changeClass() 发生了什么功能是每次点击链接时，state.button设置为 "clicked" .

在此方法中，您可以先检查按钮的值并将其设置为另一个值。例如:

changeclass=()=>{
    if(this.state.button === "notclicked"){
      this.setState({button:"clicked"}) 
  }
    else {
      this.setState({button:"notclicked"})
  }

} 

然后，如果你想要每个 <li>触发你的 changeclass功能，onClick必须为它们中的每一个设置。

此外，您的代码中还有一些拼写错误:

• onClicke必须是 onClick
• 在最后<a>标签，href 之外的字符串未关闭(缺少 " )

总而言之，此代码应按预期工作:

state:{
button:"notclicked"
}

changeclass = () => {
    if(this.state.button === "notclicked"){
      this.setState({button:"clicked"}) 
  }
    else {
      this.setState({button:"notclicked"})
  }

} 

<ul>
             
    <li className="linkactive"><a class="vote-up-off" onClick={this.changeclass} href="/"><Icon className={this.state.button} className=" fa fa-area-chart"/></a></li>
     <li><a class="vote-up-off"href="/" onClick={this.changeclass}><Icon className="fa fa-bar-chart fa-2x"/></a></li>
    <li><a class="vote-up-off" href="/" onClick={this.changeclass}><Icon className="fa fa-line-chart"/></a></li>   

</ul>