这是语义用户界面菜单组件的外观:
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
为空,这在大多数情况下都很好用。
我在这里做错什么了吗?
我运行了您的代码,发现了这一点:e.target不包含名为name的属性。所以我认为你应该做这样的事情:
这是固定代码