如何在点击 Reactjs 后添加类答案

【问题标题】：How to add class after onclick Reactjs如何在点击 Reactjs 后添加类
【发布时间】：2023-01-08 13:59:26
【问题描述】：

我正在研究 Reactjs，我有带有单选按钮的问题列表（使用循环）我想在点击的单选按钮上添加课程，但现在无法添加课程，这是我当前的代码

<FormControlLabel
                    key={`radio${item.id}${count + 2}`}
                    value={item.id.toString()}
                    control={<Radio color="primary" required={item.required} />}
                    label={getChoice(item)}
                    onClick={myfunct}
                  />
                ))}

在 jquery 中我使用下面的代码

   const myfunct = event => {
         $(this).addClass('my-selected-item');
     }

【问题讨论】：

混合使用 jQuery 和 React 会带来很多麻烦。 React 已经有了处理状态管理和样式的好方法，比如this answer。

标签： javascript reactjs

【解决方案1】：

像这样直接更改 DOM 元素不是一个好主意。更好地存储被添加到状态元素的类的状态

import { useState } from "react";
import "./styles.css";

export default function App() {
  const [active, setActive] = useState(false);

  const handler = () => setActive(!active);
  return (
    <div className={active ? "active" : ""} onClick={handler}>
      hello
    </div>
  );
}

只需一点 CSS 来测试类的存在

.active {
color: red
}

【讨论】：