如何解决为什么单击“下一步”按钮时仍会选中我的收音机选项？
我昨天问过这个问题，但好像我问错了方式或者我没有解释清楚所以昨天没有人回答我。
这是我检查单选选项的时候
但是当我点击下一个按钮时，下一个问题仍然会在我在上一个问题中检查过的同一个无线电位置被检查，我想当我点击下一个按钮时，所有的答案都会取消选中供用户再次选择。当我点击上一个以再次显示时，那些以前的问题将继续检查他们选择的答案......
编辑：这是我昨天发布的代码，我会包括一些评论，如果你能帮助我，谢谢！
import axios from 'axios';
import {Component} from 'react'
class QuizForm extends Component {
constructor(props){
super(props)
this.state={
step: 0,dataQuestion: [],question: 1,answer: [],groupQues: [],}
}
// -I get the list of question based on quiz_ID,then all the answers based on question_ID at the same time,i'll send picture or json below
async componentDidMount(){
await axios.get('http://localhost:3000/quiz/'+this.props.quizID)
.then(res=>{
this.setState({
dataQuestion: res.data
})
})
.then (()=>{
let grouped = this.state.dataQuestion.reduce((acc,obj) => {
const property = obj['question_ID'];
acc[property] = acc[property] || [];
acc[property].push(obj);
return acc;
},{});
this.setState({groupQues: grouped})
})
.catch(error => console.log(error))
}
// -For moving to next or prevIoUs question by using index
handleNext = ()=>{
let grouped = this.state.dataQuestion.reduce((acc,{});
if (this.state.step === Object.keys(grouped).length - 1){
return
}
this.setState({step: this.state.step + 1})
this.setState({question: this.state.question+1})
}
handlePrevIoUs = ()=>{
if(this.state.step === 0){
return
}
this.setState({step: this.state.step - 1})
this.setState({question: this.state.question-1})
}
/---------------
render(){
const {question} = this.state
return(
<>
<div className="column middle">
<div className="game-details-container">
<h1> Question : <span id="question-number"></span>{question}/{Object.keys(this.state.groupQues).length}</h1>
</div>
<div className="game-quiz-container">
{this.state.groupQues[Object.keys(this.state.groupQues)[this.state.step]]?.[0].question_desc}
<div className="game-options-container">
// - I'm using map to get answers based on same question_ID,example,question_ID 1 has 3 answers based on it.
<form>
{this.state.groupQues[Object.keys(this.state.groupQues)[this.state.step]]?.map(element=>
{
return(
// -I set different radio id,name based on the quiz_description,label,too
<>
<input type="radio" id={element.answer_ID} name={element.question_desc} value={element.answer_result}></input>
<label htmlFor={element.question_desc}>
//- display answer description
{element.answer_desc}
</label>
</>
)
}
)}
</form>
</div>
<div className="next-button-container">
<button onClick = {()=>this.handlePrevIoUs()}>PrevIoUs Question</button>
<button onClick = {()=>this.handleNext()}>Next Question</button>
</div>
</div>
</div>
</>
);
}
}
export default QuizForm
dataQuestion 是这样显示的：
[
{
"question_ID": 13,"question_desc": "Question 1","quiz_ID": 6,"answer_ID": 17,"answer_desc": "A","answer_result": 1
},{
"question_ID": 13,"answer_ID": 18,"answer_desc": "B","answer_ID": 19,"answer_desc": "C","answer_result": 0
},{
"question_ID": 14,"question_desc": "Question 2","answer_ID": 20,"answer_ID": 21,{
"question_ID": 15,"question_desc": "Question 3","answer_ID": 22,"answer_ID": 23,{
"question_ID": 16,"question_desc": "Question 4","answer_ID": 24,"answer_ID": 25,{
"question_ID": 17,"question_desc": "Question 5","answer_ID": 26,"answer_desc": "Testing Answer","answer_result": 0
}
]
这是我根据 question_ID 将它组合在一起的时候，所以我可以使用 array.map，它在我的代码中调用 groupQues：
{
"13": [
{
"question_ID": 13,{
"question_ID": 13,"answer_result": 0
}
],"14": [
{
"question_ID": 14,{
"question_ID": 14,"answer_result": 1
}
],"15": [
{
"question_ID": 15,{
"question_ID": 15,"16": [
{
"question_ID": 16,{
"question_ID": 16,"17": [
{
"question_ID": 17,"answer_result": 0
}
]
}
更新：我已设法注销该值，例如：问题 1 有 ABC 答案，我可以选择这些 ABC 之一，它将注销值，如果我按下下一个问题，则新答案将全部取消选择，仍然会选择上一个问题，这就是我想要的。 但是当我从下一个问题中选择新答案时，上一个问题的上一个答案将立即取消选择。
import axios from "axios";
import { Component } from "react";
class QuizForm extends Component {
constructor(props) {
super(props);
this.state = {
step: 0,//- I add this selectedRadio state in
selectedRadio: null,};
}
// ------------------
async componentDidMount() {
await axios
.get("http://localhost:3000/quiz/" + this.props.quizID)
.then((res) => {
this.setState({
dataQuestion: res.data,});
})
.then(() => {
let grouped = this.state.dataQuestion.reduce((acc,obj) => {
const property = obj["question_ID"];
acc[property] = acc[property] || [];
acc[property].push(obj);
return acc;
},{});
this.setState({ groupQues: grouped });
})
.catch((error) => console.log(error));
}
// -------------------
handleNext = () => {
let grouped = this.state.dataQuestion.reduce((acc,obj) => {
const property = obj["question_ID"];
acc[property] = acc[property] || [];
acc[property].push(obj);
return acc;
},{});
if (this.state.step === Object.keys(grouped).length - 1) {
return;
}
this.setState({ step: this.state.step + 1 });
this.setState({ question: this.state.question + 1 });
// this.setState({selectedRadio: null})
};
handlePrevIoUs = () => {
if (this.state.step === 0) {
return;
}
this.setState({ step: this.state.step - 1 });
this.setState({ question: this.state.question - 1 });
};
//- I add this new method in
select = (answer_ID) => {
this.setState({ selectedRadio: answer_ID });
};
// ---------------------
render() {
const { question } = this.state;
console.log(this.state.selectedRadio);
return (
<>
<div className="column middle">
<div className="game-details-container">
<h1>
{" "}
Question : <span id="question-number"></span>
{question}/{Object.keys(this.state.groupQues).length}
</h1>
</div>
<div className="game-quiz-container">
{
this.state.groupQues[
Object.keys(this.state.groupQues)[this.state.step]
]?.[0].question_desc
}
<div className="game-options-container">
{this.state.groupQues[
Object.keys(this.state.groupQues)[this.state.step]
]?.map((element) => {
return (
//- I insert checked and onChange for the radio input
<>
<div key={element.answer_ID}>
<input
type="radio"
checked={this.state.selectedRadio === element.answer_ID}
id={element.answer_ID}
name={element.question_desc}
value={element.answer_result}
onChange={this.select.bind(this,element.answer_ID)}
/>
<label htmlFor={element.question_desc}>
{element.answer_desc}
</label>
</div>
</>
);
})}
</div>
<div className="next-button-container">
<button onClick={() => this.handlePrevIoUs()}>
PrevIoUs Question
</button>
<button onClick={() => this.handleNext()}>Next Question</button>
</div>
</div>
</div>
</>
);
}
}
export default QuizForm;
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
