React动态表单如何实现每个单选问题仅可选一个选项不冲突？

问题根因 #

HTML 原生单选框的互斥逻辑是：name属性完全相同的单选框会被识别为同一组，同一组内最多只能有一个选项被选中。你当前所有单选框的name都硬编码为固定值radioBtn，导致所有问题的单选框都被归到了同一组，因此选第二个问题的选项时会自动取消第一个问题的选中状态。

修复方案 #

将单选框的name属性替换为每个问题独有的标识，保证同一问题下的所有单选框name相同，不同问题的name不同即可。你代码中已经携带了问题唯一标识question.id，直接用它拼接生成name值即可。

修改后的RadioBtn组件代码如下：

import React, { useContext } from "react";
import { FormContext } from "./FormContext";

const RadioBtn = ({ question, handleChange }) => {
  console.log("id", question.id);
  return (
    <div>
      <label>{question.text}</label>
      <label style={{ color: "gray", fontSize: "12" }}>
        {question.helptext ? question.helptext : null}
      </label>
      {question.list.map((el, index) => (
        // 补充map的key属性，避免React渲染警告
        <div key={`${question.id}_opt_${index}`}>
          <label>{el}</label>
          <input
            type="radio"
            // 替换为动态生成的唯一name，同一问题的单选框归属同一组
            name={`radio_${question.id}`}
            value={el}
            onChange={(e) => handleChange(question.id, e)}
          />
        </div>
      ))}
    </div>
  );
};

export default RadioBtn;

补充优化点：原代码中map遍历没有加key属性，新增了key值避免React渲染警告，不影响原有单选逻辑。

内容的提问来源于stack exchange，提问作者zara esmaeili