无法检查单选按钮并获取单选按钮的值

Posted 2023-03-27

【中文标题】无法检查单选按钮并获取单选按钮的值

【英文标题】：Unable to check the radio button and get the value of radio button

【发布时间】：2020-07-14 13:16:29

【问题描述】：

我正在尝试从我的 MongoDB 数据库中获取数据并尝试在数据库中使用 React 显示数据我有 4 个名为 Ques、Ques_type、Ans 和 Options 的属性，其中选项是一个数组，现在我想为其创建单选按钮从数据库映射时的所有选项。我就是这样做的

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>
    )
  

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

【参考方案1】：

我有类似的问题。使用 Checkboxradiogroup 的语义 ui-react 的 chekcbox 代替收音机。你可以在这里找到它https://react.semantic-ui.com/modules/checkbox/#types-radio-group

<Checkbox
            label=currentquestion.options[0]
            name='checkboxRadioGroup'
            id = currentquestion._id
            value =currentquestion.options[0]
            checked = this.state.value === currentquestion.options[0]
            onChange=this.handleOptionChange

          />