如何在React和JSX中最优渲染单选框并绑定状态变化值

最终可直接使用的代码 #

import { useState } from 'react';

function YourComponent() {
  const [inputMode, setInputMode] = useState(1);

  return (
    <>
      {/* 修正原代码中h1开标签h2闭标签的语法错误 */}
      <h1>Result</h1>
      <input
        type="radio"
        value="1"
        checked={inputMode === 1}
        onChange={e => setInputMode(Number(e.target.value))}
      />
      <input
        type="radio"
        value="2"
        checked={inputMode === 2}
        onChange={e => setInputMode(Number(e.target.value))}
      />
    </>
  );
}

如果后续需要扩展更多单选选项，还可以用数组遍历进一步简化，避免重复写input标签：

const RADIO_OPTIONS = [
  { label: '选项1', value: 1 },
  { label: '选项2', value: 2 }
];

// return内写法
{
  RADIO_OPTIONS.map(option => (
    <input
      key={option.value}
      type="radio"
      value={option.value}
      checked={inputMode === option.value}
      onChange={e => setInputMode(Number(e.target.value))}
    />
  ))
}

问题逐一解答 #

• 内联渲染完全可行，不需要单独定义渲染函数和多分支if-else判断，上面的代码直接在return语句内完成所有渲染逻辑，没有额外的外部函数定义。
• 你当前用onClick绑定的方式虽然能运行，但属于不规范写法。之前onChange不生效的核心原因是你使用了非受控属性defaultChecked，该属性仅在组件首次渲染时生效，后续状态变更不会更新选中状态。替换为受控属性checked和onChange绑定是React官方推荐的标准写法，适配性和可靠性更高。
• 给出的实现版本性能更优：一是删除了冗余的分支判断和重复的JSX代码，减少了渲染阶段的计算量；二是采用受控组件模式，状态和UI完全同步，不会出现非受控组件可能的状态不一致导致的额外重渲染；三是无需额外定义渲染函数，减少了函数创建和调用的开销。
• 不需要通过if-else设置defaultChecked，直接用checked={inputMode === 对应value}的布尔表达式即可内联动态控制选中状态，是当前场景下最简洁的实现方案，defaultChecked仅适用于不需要动态变更选中状态的非受控组件初始化场景。

内容的提问来源于stack exchange，提问作者Alen Smith