Semantic-UI Menu组件类转函数组件后点击事件e.target.name为空问题

你遇到的问题核心是Semantic-UI React组件的事件回调逻辑和原生DOM事件不一样，具体原因和修正方法如下：

问题根源 #

在你原来的类组件代码中，事件处理函数是这么写的：

handleItemClick = (e, { name }) => this.setState({ activeItem: name })

这里的第二个参数是Semantic-UI组件主动传递的组件属性对象，里面包含了你给Menu.Item设置的name等属性。

但你在函数组件里只尝试通过e.target.name获取值，而e.target指向的往往是Menu.Item内部的子DOM元素（比如包裹文字的<span>），这些元素并没有设置name属性，所以自然返回空值。

修正后的函数组件代码 #

把事件处理函数改成接收两个参数，直接从第二个参数里解构出name即可：

import React, { useState } from "react";
import { Menu, Segment, Input } from "semantic-ui-react";

function App() {
  const [activeItem, setActiveItem] = useState("home");

  // 接收第二个参数，解构获取组件的name属性
  const setActiveItemOnClick = (e, { name }) => {
    setActiveItem(name);
  };

  return (
    <div>
      <Menu pointing>
        <Menu.Item 
          name="home" 
          active={activeItem === "home"} 
          onClick={setActiveItemOnClick} 
        />
        <Menu.Item 
          name="messages" 
          active={activeItem === "messages"} 
          onClick={setActiveItemOnClick} 
        />
        <Menu.Item 
          name="friends" 
          active={activeItem === "friends"} 
          onClick={setActiveItemOnClick} 
        />
        {/* 还原你类组件里的右侧搜索菜单 */}
        <Menu.Menu position='right'>
          <Menu.Item>
            <Input icon='search' placeholder='Search...' />
          </Menu.Item>
        </Menu.Menu>
      </Menu>
      <Segment>
        <img src="https://react.semantic-ui.com/images/wireframe/paragraph.png" alt="Placeholder content" />
      </Segment>
    </div>
  );
}

export default App;

补充说明 #

Semantic-UI React的所有交互类组件（比如Menu.Item、Button等）的事件回调，都会额外传递一个组件属性对象作为第二个参数，这个对象包含了你给组件设置的所有自定义属性。这种设计可以避免依赖原生DOM元素的属性，防止组件内部DOM结构变化导致的逻辑失效。

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