如何在semantic-ui-react的Label组件onClick事件中修改自身文本？

在React函数组件中，你可以通过**状态（state）**来管理Label的文本内容，这是React原生的解决方案，不需要扩展Semantic UI的Label组件。具体实现步骤如下：

1. 导入React的useState钩子，用于管理组件状态
2. 初始化状态变量存储Label的文本内容
3. 将Label的文本替换为状态变量
4. 在onClick事件中更新状态，触发组件重新渲染，从而更新Label文本

修改后的完整代码：

import "./styles.css";
import { Label } from "semantic-ui-react";
import { useState } from "react"; // 导入useState钩子

export default function App() {
  // 初始化状态，默认文本为初始值
  const [labelText, setLabelText] = useState("Click here to change text");

  return (
    <div className="App">
      <Label
        as="a"
        color="green"
        tag
        onClick={(e) => {
          // 更新状态，修改Label文本
          setLabelText("文本已更新！");
        }}
      >
        {labelText} {/* 使用状态变量作为Label的文本内容 */}
      </Label>
    </div>
  );
}

原理说明 #

React的状态是驱动UI更新的核心：当你调用setLabelText修改状态时，组件会重新渲染，Semantic UI的Label组件会自动使用新的状态值作为文本内容，完全符合你要求的「基于React/Semantic UI原生方法」的需求。

你还可以根据需求自定义点击后的文本逻辑，比如切换文本、根据条件设置不同内容等，只需要在onClick中调整setLabelText的参数即可。

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