React单选框选中同步问题：一题选中状态影响另一题

问题描述 #

我开发了一个基于React的测验页面，页面会根据当前状态（如题目、选项）展示不同内容，使用单选框作为答题选项。遇到的问题是：选中第一题的第一个选项后，切换到第二题时，第二题的第一个选项也会被自动选中。

我的React代码 #

状态与事件处理 #

const [currentSoal, setCurrentSoal] = useState(0);
const [selectedOptions, setSelectedOptions] = useState({});

const handleOptionChange = (event) => {
    const { name, value } = event.target;
    setSelectedOptions({
        ...selectedOptions,
        [name]: value,
    });
};

选项渲染逻辑 #

{item.soal[currentSoal].opsi.map((opsiItem, opsiIndex) => (
    <label key={opsiIndex}>
        <input
            id={`option-${opsiItem.id}`}
            type="radio"
            name={item.soal[currentSoal].id}
            value={opsiItem.id}
            checked={selectedOptions[item.soal[currentSoal].id === opsiItem.id]}
            onChange={handleOptionChange}
        />
        <span className="pl-5">{opsiItem.opsi}</span>
    </label>
))}

Laravel Blade实现示例 #

@foreach ($question->opsi as $option)
    <div class="form-check">
       <input class="form-check-input" type="radio" 
           name="soal[{{ $question->id }}]"
           id="option-{{ $option->id }}"
           value="{{ $option->id }}"
              @if (old("soal.$question->id") == $option->id) 
                  checked 
              @endif />
        <label class="form-check-label" for="option-{{ $option->id }}">
            {{ $option->opsi }}
        </label>
    </div>
 @endforeach

解决方案 #

问题出在checked属性的判断逻辑错误：你把item.soal[currentSoal].id === opsiItem.id这个布尔值作为键去selectedOptions里取值，而不是用题目ID作为键，再判断对应的值是否等于当前选项ID。

正确的checked判断应该改为：

checked={selectedOptions[item.soal[currentSoal].id] === opsiItem.id}

逻辑说明 #

• selectedOptions对象的键是题目ID，值是该题目下已选中的选项ID
• 渲染某道题的选项时，先用当前题目ID从selectedOptions中取出已选的选项ID，再和当前选项的ID做比较，相等则标记为选中

修正后的完整渲染代码：

{item.soal[currentSoal].opsi.map((opsiItem, opsiIndex) => (
    <label key={opsiIndex}>
        <input
            id={`option-${opsiItem.id}`}
            type="radio"
            name={item.soal[currentSoal].id}
            value={opsiItem.id}
            checked={selectedOptions[item.soal[currentSoal].id] === opsiItem.id}
            onChange={handleOptionChange}
        />
        <span className="pl-5">{opsiItem.opsi}</span>
    </label>
))}

这样就和你Laravel Blade中的逻辑完全对应：Blade里用old("soal.$question->id") == $option->id判断选中状态，React中则通过selectedOptions[题目ID] === 选项ID实现相同逻辑。

内容的提问来源于stack exchange，提问作者Febrian Daffa Eka Putra