子组件不会更改类 onClick

问题描述

我正在开发一个抽认卡 React 应用程序来帮助我学习 Network+。我试图让它在笔记本电脑和智能手机上看起来都很好。允许用户知道他们的答案已被注册的一个关键特征是，如果他们的选择是错误的，则使答案选项变为红色，如果他们选择了正确的答案，则使答案选项变为绿色。只有第一次尝试回答才能得分。

在我的应用程序中，更改答案选项颜色的功能在笔记本电脑的显示屏上完美运行，但在智能手机上，唯一有效的功能是该功能的评分部分，答案选项保持黑色（初始，开始颜色）。这是改变颜色的函数：

checkAnswer = (event) => {
    const { diceRoll,category,currentQuestion,correctAnswer,details,choice1,choice2,choice3,choice4,success,scorable,score} = this.state;
    
    let answer = event.target.innerText;
    let el = event.target.id;
    if (answer == correctAnswer) {
      document.getElementById(el).className = "greenAnswerButton"
      if (scorable) {
      this.setState({
        score: score + 1,})
        
      }
    } else if (answer != correctAnswer) {
      document.getElementById(el).className = "redAnswerButton"
    }
    this.setState({
      scorable: false
    }) 
  }

在代码的渲染部分，小屏代码的编写方式如下：

<div className = "narrowerScreens">
          
        <FlashCardMini {...flashProps} />
          <div className = "view-pager-div" data-ui-load="@lib/controllers/view_pager"
     data-o-paging="true">
          <AnswerOne {...flashProps} />
          <AnswerTwo {...flashProps} />  
          <AnswerThree {...flashProps} />
          <AnswerFour {...flashProps} /> 
          </div> {/*pager*/}
        </div>

这是“AnswerOne...etc”子组件的编写方式：

const AnswerTwo = (props) => {
  return (
  <div className = 
"miniAnswer">
            <h3 className = {props.success == "green" ? "greenAnswerButton" : props.success == "red" ? 
"redAnswerButton" : "answerButton"} id = "answer-two" onClick = {props.checkAnswer}>{props.choice2}</h3>
              </div>
  )
}

这里是 props 对象，它成功地适用于代码的笔记本电脑部分，并用作所有东西的道具：

const flashProps = {
      diceRoll: diceRoll,category: category,currentQuestion: currentQuestion,correctAnswer: correctAnswer,details: details,choice1: choice1,choice2: choice2,choice3: choice3,choice4: choice4,success: success,scorable: scorable,score: score,questionArr: questionArr,getCurrentQuestion: () => this.getCurrentQuestion(),checkAnswer: () => this.checkAnswer(event)
    }

如果你真的想深入了解它，这里是 codepen.io 上的实际应用程序。它就像我想要的笔记本电脑一样工作，但答案选项不会改变手机显示屏的颜色（在我尝试向其添加视图页面并使其更适合手机之前，它们曾经如此）。 https://codepen.io/Dpodrasky/pen/xxEpvrO

我想我有一些多余和不必要的代码，但据我所知它没有干扰任何东西。如果你不知道，我是一个自学的编码员，每天下班后学习几个小时。所以，我没有复杂的编码知识。有些对专业编码人员来说似乎很明显的事情，我什至不明白。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）