ReactJs：如何显示正确的问卷答案和总分？

Question

I am new to react and I want to arrange the correct option of each question on the same page. Also, when the question is solved it should show whether it is correct or not. In the end, I need the total score. How can I accomplish that? Thank you for the help in advance.

This what I have done so far..( Normally there are more questions but I had to delete them to post)

const questionsArray = [
  {
    question: 'When the C programming language has first appeared?',
    option1: '1970',
    option2: '1971',
    option3: '1972'
  },
  {
    question: 'When the Java programming language has first appeared?',
    option1: '1994',
    option2: '1995',
    option3: '1996'
  },
];


class QuizAppQuestion extends React.Component {
  constructor(props, context) {
    super(props, context);
    this.state = {
      currentQuestionIndex: 0,
      questions: [],
      answers: []
    };
  }

  componentDidMount() {
    this.setState({questions: questionsArray})
  }

  onChangeOption(value) {
    const {currentQuestionIndex} = this.state;
    let answers = {...this.state.answers};
    answers[currentQuestionIndex] = value;
    this.setState({answers});
  }

  handleNext() {
    let incrementCurrentQuestionIndex = this.state.currentQuestionIndex + 1;
    this.setState({currentQuestionIndex: incrementCurrentQuestionIndex});
  }

  render() {
    const {questions, currentQuestionIndex, answers} = this.state;
    if (!questions.length) {
      return <div>Loading questions...</div>
    }
    if (currentQuestionIndex >= questions.length) {
      return (<div><h3>End of the quiz</h3></div>)
    }

    const {question, option1, option2, option3} = questions[currentQuestionIndex];

    return (<div>
         <h1>Question {currentQuestionIndex + 1}</h1>
         <h4>{question}</h4>
         <label>
           <input type='radio' checked={answers[currentQuestionIndex] === option1} value={option1} onChange={(evt) => this.onChangeOption(evt.target.value)}/>
                    {option1}
         </label>
         <br/>
         <label>
           <input type='radio' checked={answers[currentQuestionIndex] === option2} value={option2} onChange={(evt) => this.onChangeOption(evt.target.value)}/>
                    {option2}
          </label>
          <br/>
          <label>
             <input type='radio' checked={answers[currentQuestionIndex] === option3} value={option3} onChange={(evt) => this.onChangeOption(evt.target.value)}/>
                    {option3}
          </label>
          <hr/>
          <button onClick={() => this.handleNext()}>Next</button>
        </div>);
  }
}

Answer 1

You would want to make a separate array that holds the answers, and test the selected answer against the appropriate question/answer in your answers array. So in your case something like:

const answerArray = [
  {
    question: "When the C programming language has first appeared?",
    answer: "option1"
  }
]

onSubmit = (selectedAnswer) => { // Selected answer is the option picked from your select menu
  if(selectedAnswer === answerArray[currentQuestionIndex].answer) {
    // Logic for correct answer
  } else {
    // Logic for incorrect answer
  }
}