我怎样才能在反应中只允许一个输入选择？

Question

现在所有输入之间只允许一个选择。我不确定如何解决这个问题。我认为名称应该在所有输入之间匹配，但也许我错了。如果我删除它，那么允许的输入选择数量是无限的。

我该如何解决这个问题？谢谢。

{props.Data.map((item, index) => {
            return (
                <div key={index}>
                    <h3>{item.question}</h3>
                
                    <input
                        type="radio"
                        name="answer option"
                        id={`answer-options-${index}`}
                        value={results}
                        onChange={e => setResults(e.target.value)}/>
                            <label htmlFor={`answer-options-${index}`}>
                                {item.answers[0]}
                            </label>    
                    <input
                        type="radio"
                        name="answer option"
                        id={`answer-options-${index}`}
                        value={results.selectedAnswer}
                        onChange={handleSelectedAnswer}/>
                            <label htmlFor={`answer-options-${index}`}>
                                {item.answers[1]}
                            </label>  
                    <input
                        type="radio"
                        name="answer option"
                        id={`answer-options-${index}`}
                        value={results.selectedAnswer}
                        onChange={handleSelectedAnswer}/>
                            <label htmlFor={`answer-options-${index}`}>
                                {item.answers[2]}
                            </label>
                    <input
                        type="radio"
                        name="answer option"
                        id={`answer-options-${index}`}
                        value={results.selectedAnswer}
                        onChange={handleSelectedAnswer}/>
                            <label htmlFor={`answer-options-${index}`}>
                                {item.answers[3]}
                            </label>
                   
                </div>
            )
        })}   
        <button
            onClick={() => {
                    checkSelectedAnswer();
                    scoreQuiz();
                    finishQuiz()}
                }>
            Check answers
        </button>

Answer 1

看起来您为所有无线电输入提供了相同的 name 属性，而实际上您正在映射无线电输入的“集合”或“组”。您希望每个“集合”/组都具有唯一的 name 属性，类似于为 id 属性所做的。

{props.Data.map((item, index) => {
  return (
    <div key={index}>
      <h3>{item.question}</h3>

      <input
        type="radio"
        name={`answer option-${item.question}`}
        id={`answer-options-${index}`}
        value={results}
        onChange={(e) => setResults(e.target.value)}
      />
      <label htmlFor={`answer-options-${index}`}>{item.answers[0]}</label>
      <input
        type="radio"
        name={`answer option-${item.question}`}
        id={`answer-options-${index}`}
        value={results.selectedAnswer}
        onChange={handleSelectedAnswer}
      />
      <label htmlFor={`answer-options-${index}`}>{item.answers[1]}</label>
      <input
        type="radio"
        name={`answer option-${item.question}`}
        id={`answer-options-${index}`}
        value={results.selectedAnswer}
        onChange={handleSelectedAnswer}
      />
      <label htmlFor={`answer-options-${index}`}>{item.answers[2]}</label>
      <input
        type="radio"
        name={`answer option-${item.question}`}
        id={`answer-options-${index}`}
        value={results.selectedAnswer}
        onChange={handleSelectedAnswer}
      />
      <label htmlFor={`answer-options-${index}`}>{item.answers[3]}</label>
    </div>
  );
})}

A DRY 版本映射答案数组：

{props.Data.map((item, index) => {
  return (
    <div key={index}>
      <h3>{item.question}</h3>
      {item.answers.map((answer) => (
        <React.Fragment key={answer}>
          <input
            type="radio"
            name={`answer option-${item.question}`}
            id={`answer-options-${index}`}
            value={results}
            onChange={(e) => setResults(e.target.value)}
          />
          <label htmlFor={`answer-options-${index}`}>{answers}</label>
        </React.Fragment>
      ))}
    </div>
  );
})}

我怎样才能在反应中只允许一个输入选择？

How can I allow just one input selection in react?

html

input

radio-button

jsx

reactjs