如何在React Typescript中正确管理单选按钮radio的选中状态

存在的错误点 #

• 数组字段映射错误：定义的genderOps元素属性为view、value，遍历时错误解构为title、gender，无法读取到正确的性别值
• 单选组name属性不统一：同一组单选按钮的name属性必须设为相同值，否则浏览器不会识别为互斥单选组，无法正常切换
• 状态类型定义不完善：radioState没有明确类型约束，初始值为null时匹配判断容易出现隐式类型问题
• 异步更新打印误区：setradioState是异步方法，调用后立刻打印radioState拿到的是更新前的旧值，无法用来验证状态是否更新成功

修正后代码 #

状态与配置部分 #

// RegisterPage.tsx
// 明确性别类型约束
type Gender = 'man' | 'woman' | null;
const [radioState, setRadioState] = useState<Gender>(null);

interface GenderOp {
  view: string;
  value: Gender;
}
const genderOps: GenderOp[] = [
  { view: "男", value: "man" },
  { view: "女", value: "woman" },
];

const onRadioChange = (selectedGender: Gender) => {
  setRadioState(selectedGender);
  // 验证选中值直接打印入参即可
  console.log(selectedGender);
};

渲染部分 #

<div>
  {genderOps.map(({ view, value }) => {
    return (
      {/* 用label包裹实现点击文字也能选中，添加key避免React警告 */}
      <label key={value} style={{ marginRight: '12px' }}>
        <input
          type="radio"
          value={value}
          {/* 同一组单选name固定为gender，保证互斥 */}
          name="gender"
          checked={value === radioState}
          onChange={() => onRadioChange(value)}
        />
        <span style={{ marginLeft: '4px' }}>{view}</span>
      </label>
    );
  })}
</div>

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