0

这就是语义 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它是空的。

我在这里做错了吗？

4

2 回答 2

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 组件创建了一个锚点，但它不会将 name 属性作为属性应用到该锚点。

于 2019-10-18T21:49:07.203 回答
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>
  );
}

在您的类组件中，您正在解构 handleItemClick 的第二个参数

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

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

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

如果你看一下 DOM，nameprop 不会向前传递 itemList DoM

因此，如果您查看 Menu.item 组件的文档，e.target 无法访问它，您可以看到发送到 Menu.item 组件的原始道具可以从dataonClick 函数的道具访问

于 2019-10-18T21:48:22.187 回答