React中点击单选按钮后添加类名的问题解决方法

你当前的问题核心是用jQuery直接操作DOM不符合React的状态管理逻辑，而且箭头函数里this的指向并非你点击的DOM元素，导致$(this)无法正确选中目标元素。下面是正确的实现方案：

步骤1：用状态管理选中项 #

在你的React组件内部，通过useState存储当前选中的单选按钮ID：

import { useState } from 'react';

// 组件内部代码
const [selectedRadioId, setSelectedRadioId] = useState(null);

步骤2：修改点击事件，更新状态 #

移除jQuery代码，通过点击事件更新组件状态：

const myfunct = (itemId) => {
  setSelectedRadioId(itemId);
};

步骤3：动态绑定类名 #

在FormControlLabel上根据选中状态动态添加目标类名：

<FormControlLabel
  key={`radio${item.id}${count + 2}`}
  value={item.id.toString()}
  control={<Radio color="primary" required={item.required} />}
  label={getChoice(item)}
  onClick={() => myfunct(item.id)}
  className={selectedRadioId === item.id ? 'my-selected-item' : ''}
/>

原方案失效的原因 #

1. React是状态驱动UI，直接用jQuery操作DOM会绕过React的状态管理机制，导致UI与内部状态不一致，后续易出现难以排查的bug。
2. 箭头函数中的this指向组件上下文（函数组件中this为undefined），并非点击的DOM元素，因此$(this)无法定位到目标单选按钮容器。

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