React中为何使用方法无法更新Tab组件的类名？

我尝试实现三个Tab标签，选中时切换颜色，但发现graphTab状态已经正确变更，可对应的类名却没更新，导致颜色无法切换。截图显示状态已是第二个Tab，但检查元素时类名还是不对。

代码片段 #

方法部分 #

setTabClass(tab) {
    console.log(this.graphTab);
    if (tab === this.graphTab) {
        return 'currentTab';
    }
    else {
        return '';
    }
}

handleClassClick = (tab) => {
    this.setState( {graphTab: tab} );
}

元素部分 #

<div className='chart-area'>
    <div className='chart-area-tabs'>
        <p className={this.setTabClass('sales')} onClick={() => this.handleClassClick('sales')} >Sales (0$)</p>
        <p className={this.setTabClass('order')} onClick={() => this.handleClassClick('order')} >Order Volume (0)</p>
        <p className={this.setTabClass('ticket')}  >Ticket Size ($0.00)</p>
    </div>
</div>

问题原因分析 #

核心问题是setTabClass方法的this上下文绑定错误：

• handleClassClick用了箭头函数，自动绑定了组件实例的this，但setTabClass是普通函数，在render阶段调用时，this并没有指向组件实例，导致this.graphTab获取的不是当前组件的state值，判断逻辑失效，类名始终返回空。
• 另外第三个Tab缺少onClick事件，点击它无法触发状态更新。

解决方案 #

方案1：修正setTabClass的this绑定 #

把setTabClass改成箭头函数，自动绑定组件实例的this：

setTabClass = (tab) => {
    console.log(this.state.graphTab);
    if (tab === this.state.graphTab) {
        return 'currentTab';
    } else {
        return '';
    }
}

或者在构造函数中手动绑定：

constructor(props) {
    super(props);
    this.state = { graphTab: 'sales' }; // 初始化默认选中的Tab
    this.setTabClass = this.setTabClass.bind(this);
}

方案2：简化render中的类名判断 #

直接在JSX内判断类名，省去额外方法，避免绑定问题：

<div className='chart-area'>
    <div className='chart-area-tabs'>
        <p className={this.state.graphTab === 'sales' ? 'currentTab' : ''} onClick={() => this.handleClassClick('sales')} >Sales (0$)</p>
        <p className={this.state.graphTab === 'order' ? 'currentTab' : ''} onClick={() => this.handleClassClick('order')} >Order Volume (0)</p>
        <p className={this.state.graphTab === 'ticket' ? 'currentTab' : ''} onClick={() => this.handleClassClick('ticket')} >Ticket Size ($0.00)</p>
    </div>
</div>

补充：完善第三个Tab的点击事件 #

不管用哪种方案，都要给第三个Tab加上onClick事件，否则无法切换到这个Tab的选中状态。

修改后，点击Tab时setState更新graphTab，组件重新渲染，类名会根据当前state正确赋值，currentTab对应的颜色样式就能正常切换了。

内容的提问来源于stack exchange，提问作者Filipe Nogueira