无法将 class 组件转换为函数组件

Question

这是语义-ui 菜单组件的样子：

import React, { Component } from 'react'
import { Input, Menu, Segment } from 'semantic-ui-react'

export default class MenuExamplePointing extends Component {
  state = { activeItem: 'home' }

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

  render() {
    const { activeItem } = this.state

    return (
      <div>
        <Menu pointing>
          <Menu.Item
            name='home'
            active={activeItem === 'home'}
            onClick={this.handleItemClick}
          />
          <Menu.Item
            name='messages'
            active={activeItem === 'messages'}
            onClick={this.handleItemClick}
          />
          <Menu.Item
            name='friends'
            active={activeItem === 'friends'}
            onClick={this.handleItemClick}
          />
          <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' />
        </Segment>
      </div>
    )
  }
}

我正在尝试将其转换为函数组件。这是我的功能组件的样子：

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

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

  const setActiveItemOnClick = e => {
    alert(e.target.name);
    setActiveItem(e.target.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>

      <Segment>
        <img src="https://react.semantic-ui.com/images/wireframe/paragraph.png" />
      </Segment>
    </div>
  );
}

export default App;

除了当我点击菜单项时，e.target.name 是空的。

这在大多数情况下工作正常。

我是不是做错了什么？

Answer 1

这是固定码

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

  const setActiveItemOnClick = (e, { name }) => {
    console.log(name);
    setActiveItem(name);
  };

  return (
    <div>
      <MenuExamplePointing />
      <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>

      <Segment>
        <img src="https://react.semantic-ui.com/images/wireframe/paragraph.png" />
      </Segment>
    </div>
  );
}

在您的 class 组件中，您正在解构 handleItemClick

的第二个参数

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

您可以在功能组件中对处理程序执行相同的操作

const setActiveItemOnClick = (e, { name }) => {
  console.log(name);
  setActiveItem(name);
};

如果您看一下 DOM，name 道具不会向前传递

因此 e.target 无法访问如果你看一下 Menu.item 组件的 docs，你可以看到发送到 Menu.item 组件的原始道具可以从 onClick 函数的 data 道具访问

Answer 2

我运行你的代码，我发现了这个：e.target 不包含名为 name 的属性。所以我认为你应该这样做：

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

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

  const setActiveItemOnClick = (name) => {

    setActiveItem(name);
  };

  return (
    <div>
      <Menu pointing>
        <Menu.Item
          name="home"
          active={activeItem === "home"}
          onClick={() => setActiveItemOnClick("home")}
        />
        <Menu.Item
          name="messages"
          active={activeItem === "messages"}
          onClick={() => setActiveItemOnClick("messages")}
        />
        <Menu.Item
          name="friends"
          active={activeItem === "friends"}
          onClick={() => setActiveItemOnClick("friends")}
        />
      </Menu>

      <Segment>
        <img src="https://react.semantic-ui.com/images/wireframe/paragraph.png" />
      </Segment>
    </div>[enter image description here][1]
  );
}
export default App

react-semantic-ui 中的 Menu.Item 组件创建了一个锚点，但它没有将名称 prop 作为属性应用于该锚点。

无法将 class 组件转换为函数组件

Unable to convert class component to function component

reactjs

semantic-ui