React.js中如何获取选中单选按钮的值并存储到另一个状态

我看你现在的困扰是没法把每个问题的单选选中值正确存到状态里对吧？先梳理下你当前代码里的几个核心问题，再给你调整后的完整实现：

你代码里的问题点 #

• 所有单选框的name都是"options"，这会让所有问题的单选按钮归为同一组，选了其中一个，其他问题的单选都会被取消，完全不符合多题独立选择的需求。
• 没有绑定onChange事件，所以选中单选按钮时根本不会触发状态更新，自然没法把选项值存起来。
• 缺少状态回显的逻辑，就算后续存了值，刷新或者重新渲染后也看不到之前选中的选项。

调整后的完整代码 #

首先你需要先定义一个状态来存储每个问题的选中答案，比如用对象结构，键对应问题的索引，值对应选中的选项：

import { useState } from 'react';
import { Radio, FormControlLabel } from '@mui/material'; // 假设你用的是Material UI组件

// 你的组件内部逻辑
const [selectedAnswers, setSelectedAnswers] = useState({});

// 处理单选选中的函数
const handleAnswerChange = (questionIndex, optionValue) => {
  setSelectedAnswers(prev => ({
    ...prev,
    [questionIndex]: optionValue
  }));
};

return (
  <div>
    {!data ? "Loading..." : 
      data?.response?.data?.data?.length > 0 && 
      Object.entries(data?.response?.data?.data)?.map( ([key, value], index) => {
        return (
          <div key={index} style={{ marginBottom: '20px' }}>
            <b>{value.question}</b>
            <div>
              {value?.options?.map((o, i) => {
                return (
                  <div key={i} style={{ margin: '8px 0' }}>
                    <FormControlLabel
                      control={
                        <Radio
                          name={`question-${index}`} // 每个问题用独立的name，避免组冲突
                          value={o}
                          checked={selectedAnswers[index] === o} // 回显已选中的状态
                          onChange={() => handleAnswerChange(index, o)} // 触发状态更新
                        />
                      }
                      label={o} // 直接用选项文本作为label，移除多余的input
                    />
                  </div>
                );
              })}
            </div>
          </div>
        );
      })
    }
    {/* 可以在这里打印状态，实时查看选中结果 */}
    <pre>{JSON.stringify(selectedAnswers, null, 2)}</pre>
  </div>
);

关键改动说明 #

1. 状态定义：用selectedAnswers对象存储每个问题的选中值，键是问题的索引（如果API返回问题唯一ID，用ID会更稳妥），值是选中的选项内容。
2. 独立分组的name：给每个问题的单选框设置name={question-${index}}，保证每个问题的单选按钮是独立组，不会互相干扰。
3. 绑定onChange事件：点击单选按钮时调用handleAnswerChange，把当前问题索引和选中选项值传入，更新状态。
4. 选中状态回显：通过checked={selectedAnswers[index] === o}判断当前选项是否被选中，确保重新渲染后能保留之前的选择。
5. 移除冗余元素：你原代码里的<input name="options" value={o} />是多余的，Material UI的FormControlLabel已经支持通过label属性展示选项文本。

这样调整后，每次选中单选按钮，对应的选项值就会被存储到selectedAnswers状态里，你可以在需要的时候用这个状态做提交或其他后续处理。

内容的提问来源于stack exchange，提问作者Shubham Sanchela