时间戳

首页 > 解决方案 > 我需要在反应中管理每个选项卡的状态

reactjs - 我需要在反应中管理每个选项卡的状态

问题描述

我是 react.js 的新手。你能帮我处理下面的代码，我需要在其中管理每个选项卡的状态吗？

state = {
    selected: false
}
handleChange = () => {
    this.setState({
        selected: true
    })
}

render (){
    return (
        <div>
            <ul className={styles.tabsResultsTabs}>
                <li onClick={this.handleChangeTab} className={this.state.selected ? styles.active : null}>Home</li>    
                <li onClick={this.handleChangeTab} className={this.state.selected ? styles.active : null} id="2">Post</li>
                <li onClick={this.handleChangeTab} className={this.state.selected ? styles.active : null} id="3">Contact us</li>
                <li onClick={this.handleChangeTab} className={this.state.selected ? styles.active : null} id="4">About</li>
            </ul>
        </div>
    )
}

上面的代码不起作用。因此，我需要在单击时在活动选项卡之间切换样式。

标签： reactjs

解决方案

state = {
  selected: 0
}
handleChangeTab = (i) => {
this.setState({
  selected: i
})
}

render ()
{
return (
<div>
<ul className={styles.tabsResultsTabs}>

<li onClick={()=>this.handleChangeTab(0)} className={this.state.selected===0 ? styles.active : null}>Home</li>

<li onClick={()=>this.handleChangeTab(1)} className={this.state.selected===1 ? styles.active : null} id="2">Post</li>

<li onClick={()=>this.handleChangeTab(2)} className={this.state.selected===2 ? styles.active : null} id="3">Contact us</li>

<li onClick={()=>this.handleChangeTab(3)} className={this.state.selected===3 ? styles.active : null} id="4">About</li>

</ul>
</div>

我不确定我的回答是否值得推荐，但我希望它对你有所帮助。

推荐阅读