时间戳

首页 > 解决方案 > 在反应 js 中切换显示/隐藏 li 上的“活动”类

reactjs - 在反应 js 中切换显示/隐藏 li 上的“活动”类

问题描述

嗨，我想在单击 ul 中的 li 时显示/隐藏课程。以下是ul的代码：

<ul className="period">
                            <li className="" onClick={this.onChangeForDays} value="Indefinitely">Indefinitely</li>
                            <li className="active" onClick={this.onChangeForDays} value="1">1 Day</li>
                            <li className="" onClick={this.onChangeForDays} value="7">1 Week</li>
                            <li className="" onClick={this.onChangeForDays} value="30">1 Month</li>
                            <li className="" onClick={this.onChangeForDays} value="90">3 Months</li>
                            <li className="" onClick={this.onChangeForDays} value="180">6 Months</li>
                        </ul>

所以我想要实现的是编写一个通用函数，当我单击任何一个<li>它应该显示active该特定类<li>并隐藏active所有其他类时<li>。还有一件事我想active在其中一个上默认显示类，<li>所以可以说我想首先默认<li>有active类，我试图编写函数但我卡住了。

   onChangeForDays(changeEvent) {
    this.setState({
        'fordays': changeEvent.target.value,
        'isActive': true
    });
}

我怎样才能做到这一点有人可以帮忙。谢谢

标签： reactjs

解决方案

您可以使用this.state.fordaysinrender检查哪个元素处于活动状态

<li className={this.state.fordays === 'Indefinitely' ? 'active' : ''} onClick={this.onChangeForDays} value="Indefinitely">Indefinitely</li>

推荐阅读