代码如下:
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
?
我想向用户显示他当前所在的标签页
最佳答案
现在你的 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>
https://stackoverflow.com/questions/64463364/