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的属性。所以我认为您应该这样做：

__range

react-semantic-ui中的Menu.Item组件会创建一个锚点，但不会将prop属性用作该锚点的属性。

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道具不会被传递

因此它不能被e.target访问如果您查看Menu.item组件的docs，您会看到可以从onClick函数的data道具中访问发送到Menu.item组件的原始道具

无法将类组件转换为功能组件

2 个答案: