Невозможно преобразовать компонент класса в компонент функции

Question

Вот как выглядит компонент меню семантического интерфейса:

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

Я запустил ваш код и обнаружил следующее: 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

Компонент Menu.Item вact-semantic-ui создает якорь, но он не применяет имя проп в качестве атрибута для этого якоря.

Answer 2

Это фиксированный код

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>
  );
}

В вашем компоненте класса вы деструктурируете второй параметр handleItemClick

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

Вы можете сделать то же самое для вашего обработчика в вашем функциональном компоненте

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

Если вы посмотрите на DOM, реквизит name не будет передан вперед

, поэтому он не доступен.target Если вы посмотрите на docs компонента Menu.item, вы увидите, что исходные реквизиты, отправленные в компонент Menu.item, доступны из data пропуска onClickфункция