反应类名不选择内联样式

我在我的react应用中使用动态内容。内容加载得很好。我试图根据一个动态值来改变段落标签的样式。样式也会在段落标签的点击事件中改变。当我点击段落时,文本正在改变,但之前选择的样式仍然有效,并没有随着动态值的改变而改变。正在改变样式的代码是

if(ans){
        return ans.map((a, index) => {
            return(
                <div className="options-container" key={index}>
                        <p onClick={this.handleOptionClick} className={a.IsChecked ? 'option-selected' : 'option'}>{a.Awnser}</p>
                </div>
            )} 
        );
    }

风格是

.options-container {
    display: inline-block;
    width: 30%;
}

.option {
    background-color: $blue;
    border-radius: $button-radius;
    color: $white;
    cursor: pointer;
    margin: $md auto;
    padding: $normal;
    transition: 0.3s linear all;
    text-align: center;
    width: 90%;
}

.option-selected {
    background-color: $green;
    border-radius: $button-radius;
    color: $white;
    cursor: pointer;
    margin: $md auto;
    padding: $normal;
    transition: 0.3s linear all;
    text-align: center;
    width: 90%;
}

解决方案:

问题似乎在于 a.IsChecked,其余的代码看起来是正确的。确认其值是否在组件中更新。

本文来自投稿,不代表实战宝典立场,如若转载,请注明出处:https://www.shizhanbaodian.com/4905.html

(0)
上一篇 2022年6月1日 上午9:00
下一篇 2022年6月1日 上午9:00

相关推荐

发表评论

登录后才能评论