如何使用 React js 在 Quiz 应用程序中保存单选按钮的选中状态答案

【问题标题】：How to save Checked Status of radio button in Quiz app with react js如何使用 React js 在 Quiz 应用程序中保存单选按钮的选中状态
【发布时间】：2023-02-03 06:09:53
【问题描述】：

import React, {useState} from 'react'
import Result from './Result'
import './Exam.css'

function Exam() {

  const data = JSON.parse(localStorage.getItem('Que'))
  const selectedAns = JSON.parse(localStorage.getItem('Ans'))

  const [current, setCurrent] = useState(0)
  const [ans, setAns] = useState({selectedAns:""})
  const [correct, setCorrect] = useState(0)
  const [exit, setExit] = useState(false)

  const input = (e) => {
    //setAns((ans) => ans, e.target.value)
    setAns({...ans,
      [e.target.name]: e.target.value})
  }

  console.log(ans);

  const handlePrevious = (e) => {
    setCurrent(current - 1)

      let allRadio = document.querySelectorAll('.radioButton')

      console.log(selectedAns[(current)].selectedAns);

      allRadio.forEach(value => {
        if(selectedAns[current].selectedAns === value.value){
          value.checked = true
        }
      })


  }

  const handlerSave = () => {
    if (data[current].answer === ans) {
      setCorrect(correct + 1)
    }

    if ((current + 1) === data.length){
      setExit(true)
    }
    else {
    setCurrent(current + 1)
    }

    let allRadio = document.querySelectorAll('.radioButton')
    allRadio.forEach(value => value.checked = false)

    const answers = JSON.parse(localStorage.getItem("Ans") || "[]")
    answers.push(ans)
    localStorage.setItem('Ans', JSON.stringify(answers))

  }

  return(
    <div>
      { exit === false ?
      <div className='mcq'>
      <div>
        Question :<span className='span'>{current + 1}</span>    
        {data[current].question}?
      </div><br/>
      <div>
        <div className='option'><input type='radio' value='A' name='selectedAns' onChange={input} className='radioButton'/> {data[current].A} </div>
        <div className='option'><input type='radio' value='B' name='selectedAns' onChange={input} className='radioButton'/> {data[current].B} </div>
        <div className='option'><input type='radio' value='C' name='selectedAns' onChange={input} className='radioButton'/> {data[current].C} </div>
        <div className='option'><input type='radio' value='D' name='selectedAns' onChange={input} className='radioButton'/> {data[current].D} </div>
      </div><br/>
      <div>
        { current !== 0 && <button onClick={handlePrevious}>Previous</button>}
        <button onClick={handlerSave}>Save & Next</button>
      </div>
      </div> :
      <Result props={{correct}}/>
      }
    </div>
  )
}

export default Exam;

我正在用 React js 制作一个测验应用程序。我面临一个问题，我有数百个问题，有四个选项，还有下一个和上一个按钮。对于选项，我使用单选按钮。我希望在用户为第一个问题选择一个选项后，转到下一个问题并为第二个问题选择一个选项，他将能够转到上一个问题，并且单选按钮将被选中先前已选择该用户。

我试过这个功能。但它让我检查了不同的按钮 const handlePrevious = (e) => { setCurrent(current - 1) let allRadio = document.querySelectorAll('.radioButton') console.log(ans); allRadio.forEach(value => { if(ans === value.value){ value.checked = true } }) }

【问题讨论】：

通常你希望你的输入被反应控制。所以检查的值来自状态。我会首先重构你的代码，这样你就可以避免使用document.querySelector，而只是改变输入的状态。或者你可以使用 refs。

标签： reactjs radio-button

【解决方案1】：

您可以在 useState 的帮助下创建一个挂钩，并将默认类型添加为对象。在问题 -1 索引处，您可以存储您的价值。 OnSelectRadio 函数将接受事件和索引，当您单击任何单选按钮时将调用这些事件和索引。

const[ans, setAns] = useState({}):


onSelectRadio(event, idx){
  let temp = [..ans];
  temp[idx+1] = event.target.value;
  setAns(temp);
}

【讨论】：

谢谢，但你能在检查我现在添加的整个代码后详细说明你的答案吗？

【解决方案2】：

我做了另一个功能来检查我的单选按钮的状态...... 如果有任何其他疑问，请先检查我的完整代码，然后再检查我的解决方案。

const handlePrevious = (e) => {
    setCurrent(current - 1)
    Previous()
  }


  const Previous = () => {
    let allRadio = document.querySelectorAll('.radioButton')
    allRadio.forEach(value => {
      if(selectedAns[current-1].index === value.value){
        value.checked = true
      }
    })
  }

【讨论】：