条件渲染 + React

Question

我尝试创建一个方法来保持先前的状态，并在单击时更改回先前的状态。但是我检查了该方法是否有效，并且它在真假之间正确转换。

然而，当我在 className 中执行三元运算符时，它保持为真值，并且不允许我在两个类之间切换。第一个是常规边框，第二个具有绝对位置并带有复选标记以表明它已被选中。即使当我检查开发工具时，“复选标记”也是类名，但 onClick 没有任何变化...

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; ```

.choice_container {
  margin: 0 auto;
  width: 250px;
  padding: 1rem;
  border: solid 0.5px black;
  position: relative;
}

.choice_container .checkmark {
  display: hidden;
  position: absolute;
  border: solid 2px black;
  right: -8px;
  top: -8px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: #000;
  color: #fff;
  content: "✓";
}```

Answer 1

即使我检查开发工具，“复选标记”也是类名，但单击时没有任何变化

你激活的函数应该是onClick而不是onChange。

通常onChange 可以用于<input> 和<select>。但是，如果你使用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>

此外，我猜你想从this.state 解构。因此，您可以执行以下操作。

 const isChoiceClicked = this.state;

 const { isChoiceClicked } = this.state;