Question

我有一个类组件，其中我有问题状态并在render函数中显示问题，并尝试在无线电事件发生变化时更改commit_answer状态。

import React from 'react';
class Question extends React.Component{
    constructor(){
        super();
        this.state={
            questions:{
                1:{
                    question:"What is html full fomr",
                    options:{
                        a:"hyper text model language",
                        b:"hyper text markup language"
                    },
                    answer:"a",
                    submit:"not",
                    submited_answer:""
                },
                2:{
                    question:"this is question two",
                    options:{
                        a:"hyper text markup language",
                        b:"hyper text model language"
                    },
                    answer:"b",
                    submit:"not",
                    submited_answer:""
                },
                3:{
                    question:"this is question three",
                    options:{
                        a:"hyper text markup language",
                        b:"hyper text model language"
                    },
                    answer:"b",
                    submit:"not",
                    submited_answer:""
                },
                4:{
                    question:"this is question four",
                    options:{
                        a:"hyper text markup language",
                        b:"hyper text model language"
                    },
                    answer:"b",
                    submit:"not",
                    submited_answer:""
                }
            },
        }
        this.changeAnswer=this.changeAnswer.bind(this)
    }
    changeAnswer=(question_id,value)=>{
        let objectState=this.state.questions[question_id].submited_answer
        this.setState({objectState:value},()=>{
            alert(objectState)
        })
    }
    render(){
        let question_id=this.props.question;
        let object=this.state.questions;
        let changeAnswer=this.changeAnswer
        return(
            <div>
                <h2>{object[question_id].question}</h2>
                {Object.keys(object[question_id].options).map(function(key) {
                    return <div><input type='radio' onChange={()=>changeAnswer(question_id,object[question_id].options[key])} name='answer' value={key} />{object[question_id].options[key]}</div>;
                })}
                {object[question_id].submited_answer}
                hello world
            </div>
        )
    }
}
export default Question;

我的更改答案仍然显示为空。我在this.props.question中得到1。还有其他简单的方法可以做到这一点

Answer 1

您没有正确更新对象。请按照以下步骤更新changeAnswer函数

    changeAnswer=(question_id,value)=>{
     let objectState=this.state.questions;
     objectState[question_id].submited_answer = value;
     this.setState({objectState},()=>{
        alert(this.state.objectState)
      })
    }

如何在状态下设置动态无线电值

1 个答案: