React循环生成单选框Tab键无法正常切换焦点问题求助

你的问题出在没有给同一组单选按钮设置相同的name属性，同时错误添加了tabIndex干扰了浏览器的默认行为。

原生HTML规则中，同一组单选按钮必须共享name属性：

• 浏览器会把它们视为一个整体，Tab键只会聚焦到组内的第一个可交互项
• 聚焦后可以用**方向键（←/→ 或 ↑/↓）**切换选中的选项，这是符合无障碍标准的交互逻辑

修复步骤 #

1. 移除所有手动添加的tabIndex：单选按钮默认自带可聚焦特性，额外设置会导致父元素或多余节点抢焦点
2. 给所有单选按钮添加相同的name属性：比如name="gender"，让浏览器识别为同一组
3. 添加状态管理（可选但必要）：用useState跟踪选中值，确保单选按钮的选中状态正常同步

修复后的完整代码 #

const { useState } = React;

const App = () => {
  const genders = ["male", "female", "neutral"];
  // 管理选中的性别状态
  const [selectedGender, setSelectedGender] = useState(genders[0]);

  return (
    <React.Fragment>
      <h1>Hello Example</h1>
      <div>
        {genders.map((gender) => (
          <div key={gender}>
            <div>
              <input
                type="radio"
                name="gender"
                value={gender}
                checked={selectedGender === gender}
                onChange={() => setSelectedGender(gender)}
              />
              {gender}
            </div>
          </div>
        ))}
      </div>
    </React.Fragment>
  );
};

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<App />);

<div id="root"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.1.0/umd/react.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.1.0/umd/react-dom.development.js"></script>

说明 #

• 现在按下Tab键会直接聚焦到单选按钮组的第一个可交互项，之后用方向键就能切换不同选项
• 选中状态会通过checked属性和useState同步，符合表单控件的正常逻辑

内容的提问来源于stack exchange，提问作者Uladz Kha