如何改变选项的颜色在reactjs?

Question

我有一个测试应用程序的代码与react，

1. 我希望我的选项是红色的，如果点击错误的答案是绿色的，如果点击正确的答案，我怎么能做到这一点?
2. 我尝试了一些事情，但更改将适用于所有选项…我该如何预防呢?

这只是react代码，我当然有css:))))

import questions from './questions.json'
import {Fragment} from 'react'
import {Helmet} from 'react-helmet'
import isEmpty from '../../utls/is-empty'

class Play extends Component{
constructor(props) {
super(props);
this.state={
questions,
currentQuestion:{},
nextQuestion:{},
previousQuestion:{},
answer:'',
numberOfQuestions:0,
numberOfAnsweredQuestions:0,
currentQuestionIndex:0,
score:0,
currectAnswers:0,
wrongAnswers:0,
hints:5,
time:{},

}
}
componentDidMount() {
const{questions,currentQuestion,previousQuestion,nextQuestion}=this.state;
this.displayQuestions(questions,currentQuestion,previousQuestion,nextQuestion)
}
displayQuestions=(questions=this.state.questions , currentQuestion , nextQuestion,previousQuestion,answer)=>{
let {currentQuestionIndex}= this.state;
if(! isEmpty(this.state.questions)){
questions= this.state.questions;
currentQuestion=questions[currentQuestionIndex];
nextQuestion=questions[currentQuestionIndex+1];
previousQuestion=questions[currentQuestionIndex-1];
const answer=currentQuestion.answer;
this.setState({
currentQuestion,
nextQuestion,
previousQuestion,
answer,

});
}
};

handleOptionClick=(e)=>{
if(e.target.innerHTML.toLowerCase() === this.state.answer.toLowerCase()){
this.correctAnswer();
}else{
this.wrongAnswer();
}
}

correctAnswer=()=>{
this.setState(prevState =>({
score: prevState.score+1,
numberOfAnsweredQuestions: prevState.numberOfAnsweredQuestions+1,
currectAnswers:prevState.currectAnswers+1,
currentQuestionIndex: prevState.currentQuestionIndex+1,
// option_classcorrect: prevState.true
}))}
wrongAnswer=()=>{
this.setState(prevState =>({
score: prevState.score-1,
numberOfAnsweredQuestions: prevState.numberOfAnsweredQuestions+1,
wrongAnswers:prevState.wrongAnswers+1,
currentQuestionIndex: prevState.currentQuestionIndex+1,

}))}

render() {
const {currentQuestion}= this.state;

return(
<Fragment>
<Helmet> <title>Play</title></Helmet> 
<div className="questions">
<h2>Questions</h2>
<div className="container">
<p>
<span></span>
</p>
<p>
<span></span>
</p>
</div>
<div className="timer-container">
<p>
<span className='left' style={{float: 'left'}}>1 of 15</span>
<span className='right' style={{float: 'right'}}>2:15</span>
</p>
</div>
<div className='current-question'>
<h5>{currentQuestion.question}</h5>
</div>
<div>
<div className="options-container">
<p  onClick={this.handleOptionClick} className='option'>{currentQuestion.optionA}</p>
<p onClick={this.handleOptionClick} className='option'>{currentQuestion.optionB}</p>
</div>
<div className="options-container">
<p onClick={this.handleOptionClick} className='option'>{currentQuestion.optionC}</p>
<p onClick={this.handleOptionClick} className='option'>{currentQuestion.optionD}</p>
</div>
</div>
<div className="button-container">
<button className="btn-q">previous</button>
<button className="btn-q">next</button>
<button className="btn-q">Quit</button>
</div>  
</div>
</Fragment>

)
}}
export default Play```

Answer 1

您可以在组件上使用内联样式来根据用户的选择更改文本颜色。style={{color: incorrectColor}}

您需要评估选择的答案是否正确，更新状态，然后更新组件上的颜色。

看一下使用三元操作符来操作样式的答案:可以根据值改变文本颜色?(反应本地)

Answer 2

在这方面我有很多不同的做法，但我认为从你目前所处的位置到解决方案的最短路径将涉及将currentQuestionIndex传递到correctAnswer并跟踪哪些问题已经正确回答，而不是简单地跟踪有多少

。

this.correctAnswer(this.state.currentQuestionIndex);

correctAnswer=(index)=>{
this.setState({
userAnswers: {
...this.state.userAnswers, // retain previous state
[index]: true // set specified index to true to indicate correct
}
})
}

---

有了这个，您可以根据userAnswers[currentQuestionIndex]的值分配一个css类:

{/* you'd have to tweak this to account for unanswered questions. omitting it here in the interest of clarity */}
const answerClass = this.state.userAnswers[currentQuestionIndex] ? 'correct' : 'incorrect';
<div className=`current-question ${answerClass}`>
<h5>{currentQuestion.question}</h5>
</div>

.correct {
color: green;
}
.incorrect {
color: red;
}

---

您可以通过对正确和不正确使用相同的方法来进一步收紧这一点:

handleOptionClick=(e)=>{
const isCorrect = e.target.innerHTML.toLowerCase() === this.state.answer.toLowerCase();
this.onAnswer(this.state.currentQuestionIndex, isCorrect);
}
onAnswer=(index, isCorrect)=>{
this.setState({
userAnswers: {
...this.state.userAnswers,
[index]: isCorrect
}
})
}

这种方法还消除了numberOfAnsweredQuestions和score状态的需要，因为它们可以从userAnswers派生:

// gets the number of userAnswers
const numAnswers = Object.values(this.state.userAnswers).length;
// gets the count of userAnswers entries whose value is true
const score = Object.values(this.state.userAnswers).filter(x).length;