Javascript 我想在reactjs中实现一个条件渲染系统

我想显示在呈现数据库中的数据时，selected checked button的值是否与数据库中的答案相同。我有一个名为的变量，该变量的值为正确答案

此外，我还可以获得所选单选按钮的值。我想呈现两个div，前提是如果无线电值与正确答案相同或不相同，但我无法理解如何进行

import React, { Component } from 'react';
import axios from 'axios'
import {Form,Radio,} from 'semantic-ui-react'
import 'semantic-ui-css/semantic.min.css';





export default class QuestionList extends Component {
    constructor(props){
        super(props)
        this.handleOptionChange = this.handleOptionChange.bind(this);
        this.handleFormSubmit = this.handleFormSubmit.bind(this);

        this.state = {questions:[],
          answer:''}

    }

    handleOptionChange(e){
      this.setState({
        answer: e.target.value
      });
    }

    handleFormSubmit (e) {
      e.preventDefault();

      console.log('You have selected:', this.state.answer);
    }


    componentDidMount(){
        axios.get('http://localhost:5000/question/')
        .then(respose =>{
            this.setState({questions:respose.data})
        })
        .catch(error => {
            console.log(error);
        });

    };



    questionList() {

        return this.state.questions.map(currentquestion => {

          return(
            <Form onSubmit ={this.handleFormSubmit}>
        <Form.Field>
         <h3>Q.  {currentquestion.ques}</h3>
          <h6>Correct Answer is {currentquestion.ans} </h6>
        </Form.Field>
        <Form.Field>
          <Radio
            label={currentquestion.options[0]}
            name='radioGroup'
            value ={currentquestion.options[0]}
            checked = {this.state.answer === currentquestion.options[0]}
            onChange={this.handleOptionChange}

          />
        </Form.Field>
        <Form.Field>
          <Radio
            label={currentquestion.options[1]}
            name='radioGroup'
            value ={currentquestion.options[1]}
            checked = {this.state.answer === currentquestion.options[1]}
            onChange={this.handleOptionChange}

          />
        </Form.Field>
        <Form.Field>
          <Radio
            label={currentquestion.options[2]}
            name='radioGroup'
            value = {currentquestion.options[2]}
            checked = {this.state.answer === currentquestion.options[2]}
            onChange={this.handleOptionChange}

          />
        </Form.Field>
        <Form.Field>
          <Radio
            label={currentquestion.options[3]}
            name='radioGroup'
            value={currentquestion.options[3]}
            checked = {this.state.answer === currentquestion.options[3]}
            onChange={this.handleOptionChange}

          />
        </Form.Field>

        <button type ="submit" class="ui button" >Submit Answer</button>
        <hr />

      </Form>

          );
        })
      }



  render() {
    return (
        <div>
        <h2>Questions</h2>
        <hr />
        <hr />
        <p>{ this.questionList() } </p>

      </div>
    )
  }

import React，{Component}来自'React'；
从“axios”导入axios
从“语义ui反应”导入{Form，Radio，}
导入“语义ui css/semantic.min.css”；
导出默认类QuestionList扩展组件{
建造师（道具）{
超级（道具）
this.handleOptionChange=this.handleOptionChange.bind（this）；
this.handleFormSubmit=this.handleFormSubmit.bind（this）；
this.state={问题：[]，
答案：'}
}
手持式变更（e）{
这是我的国家({
答案：e.target.value
});
}
handleFormSubmit（e）{
e、 预防默认值（）；
console.log（'您已选择：'，this.state.answer）；
}
componentDidMount（）{
axios.get（）http://localhost:5000/question/')
。然后（respose=>{
this.setState（{问题：respose.data}）
})
.catch（错误=>{
console.log（错误）；
});
};
问题清单（）{
返回此.state.questions.map（currentquestion=>{
返回(
Q.{currentquestion.ques}
正确答案是{currentquestion.ans}
提交答案

);
})
}
render（）{
返回(
问题


{this.questionList（）}

)
}

---

但是，当我尝试选择单选按钮时，我无法检查它们，这意味着我无法在应答状态下存储任何内容。

在

语义ui

中，

onChange

采用两个参数（e，value），如果您将

console.log

值记录在

handlechange

中，您会在那里找到它，因此这是您应该在您的状态中输入的值，您可以在

文档中的操场中尝试它：
希望这能有所帮助。
试试
this.state.answer==currentquestion.options[i]
，只需2个
=