React应用如何检测radio button变更并更新permissions对象

onChange事件不触发的原因 #

• 同一组radio存在多个defaultChecked为true的情况，触发浏览器原生校验异常，导致事件无法正常触发
• 单选按钮未设置value属性，无法识别选中状态的变更
• 同一行的三个单选按钮使用了重复id，导致DOM事件绑定混乱
• 若使用reactstrap的样式但未使用官方Input组件，原生input可能被样式遮挡，点击事件无法穿透

修复方案 #

首先将permissions存入React state实现响应式管理，然后将单选按钮改为受控组件，简化判断逻辑，修正事件绑定。
完整实现代码如下：

import { useState } from 'react';
import { Input, Table } from 'reactstrap';

const PermissionTable = () => {
  // 权限状态管理
  const [permissions, setPermissions] = useState({
    "dashboard": 3,
    "user_management": 3,
    "users_feedback": 3,
    "settings": 3,
    "content_management": 3,
    "influencers": 3
  });

  // 三个单选按钮对应的权限等级，可根据业务调整
  const permissionLevels = [1, 2, 3];

  // 权限变更处理
  const handleChangePermission = (permissionKey, newValue) => {
    setPermissions(prev => ({
      ...prev,
      // 转为数字类型和原有类型保持一致
      [permissionKey]: Number(newValue)
    }));
    // 此处可添加后续逻辑，比如同步到后端
  };

  return (
    <Table>
      <tbody>
        {Object.entries(permissions).map(([permissionKey, currentValue]) => (
          <tr className="permission-row" key={permissionKey}>
            <td>{permissionKey}</td>
            {permissionLevels.map(level => (
              <td key={level}>
                <Input
                  type="radio"
                  id={`${permissionKey}_${level}`}
                  name={permissionKey}
                  value={level}
                  checked={currentValue === level}
                  onChange={(e) => handleChangePermission(permissionKey, e.target.value)}
                />
              </td>
            ))}
          </tr>
        ))}
      </tbody>
    </Table>
  );
};

export default PermissionTable;

核心修改说明 #

• 移除了冗余的setValue switch判断逻辑，直接通过currentValue === level判断选中状态
• 用受控组件属性checked替代defaultChecked，状态和视图双向绑定
• 每个单选按钮设置唯一ID和对应的value值，避免DOM冲突
• onChange事件同时传递权限字段名和选中值，直接更新state中对应的字段

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