Reactjs 条件呈现+；反应

我尝试创建一个保持前一状态的方法，并在单击时更改回前一状态。然而，我检查了这个方法是否有效，它是否在正确和错误之间正确地变化

然而，当我在类名中使用三元运算符时，它保持为真值，不允许我在两个类之间切换。第一个为常规边框，第二个为绝对位置，带有复选标记，表示已选中。即使在我检查开发工具时，“checkmark”是类名，但单击后没有任何更改

import React from 'react';
import './Questions.css'
import girl_sweat from './girl_sweat.jpg'

class Questions extends React.Component {
    constructor(props){
        super(props);
        this.state = {
            isChoiceClicked: false
        }
        this.handleChoice = this.handleChoice.bind(this);
    }

  
    handleChoice(){
    this.setState(prevState => ({isChoiceClicked: !prevState.isChoiceClicked}));
    }

 

    render(){
        const isChoiceClicked = this.state;

        return <div className="banner_column">
        <div className="banner_column_1"><img src={girl_sweat}/></div>
        <div className="banner_column_2"><div className="survey_enter"><h2 className="title">What are you interested in?</h2>
                <p className="description">Select up to <strong>3 areas</strong></p>
                <div className="choices">
                <div className={`choice_container ${isChoiceClicked ? 'checkmark': 'null'}`} onChange={this.handleChoice}><h5>Yoga</h5><p className="activities">Vinyasa, Ashtanga, Kundalini, Hatha, Restorative, Prenatal</p></div>
                <div className={`choice_container ${isChoiceClicked ? 'checkmark': 'choice_container'}`} onChange={this.handleChoice}><h5>Fitness</h5><p className="activities">Strength, Barre, Pilates, HIIT, Core, Stretching</p></div>
                <div  className={`choice_container ${isChoiceClicked ? 'checkmark': 'choice_container'}`} onChange={this.handleChoice}><h5>Mindfullness</h5><p className="activities">Meditation, Breathwork, Sound Bath, Yoga Nidra</p></div>
                <div className={`choice_container ${isChoiceClicked ? 'checkmark': 'choice_container'}`} onChange={this.handleChoice}><h5>Skills</h5><p className="activities">Handstands, Arm Balances, Flexibility, Mobility</p></div>
                </div>
                <div className="next"><button className="next_question">next question</button></div>
            </div>
    </div>
</div>
    }
    
    }

    export default Questions; ```

即使在我检查开发工具时，“checkmark”是类名，但单击后没有任何更改

您激活的功能应该是

onClick

，而不是

onChange

通常

onChange

可以在

和

中使用。但是，如果您使用的是

div

，那么使用

onChange

似乎是个问题

<div className={`choice_container ${isChoiceClicked ? 'checkmark': 'null'}`} onClick={this.handleChoice}><h5>Yoga</h5><p className="activities">Vinyasa, Ashtanga, Kundalini, Hatha, Restorative, Prenatal</p></div>

---

我认为这只是一个输入错误，您应该对状态值

const{isChoiceClicked}=this.state进行解构而不是创建新的
isChoiceClicked
这只是对state对象的引用，因为state对象是已定义的对象，所以它总是真实的。您还使用了
onChange
处理程序，而不是
onClick
处理程序。这是正确的，但即使使用onClick，我也检查了web工具，状态更改为false/true，但类名或任何可视内容都没有更改。@derek检查我更新的答案。
<div className={`choice_container ${isChoiceClicked ? 'checkmark': 'null'}`} onClick={this.handleChoice}><h5>Yoga</h5><p className="activities">Vinyasa, Ashtanga, Kundalini, Hatha, Restorative, Prenatal</p></div>


 const isChoiceClicked = this.state;

 const { isChoiceClicked } = this.state;