如何在点击反应时更改课程？答案

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>

【解决方案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>

【讨论】：

【解决方案2】：

你可以这样试试

// lets assume initial state is false
state = {clicked : false}

稍后在您的组件中，如果这样做，您将制作三元组

changeClicked = ()=>{
  // this setState will take what you have previously, and
  // will change it to opposite value
  this.setState(prev=>({clicked: !prev.clicked}))
}

//...

<a onClick={this.changeClicked}>
  <Icon className={clicked ? "clicked":"notclicked"} />
</a>

我的建议是，如果您有一些相反的东西，例如 clicked-notclicked、on-off、up-down 等，当相反的情况为 false 时，本质上一个总是正确的，请使用 boolean。

它将帮助您前进。

【讨论】：