Antd menu onclick key }); }, render() { return ( < Menu onClick = {this. Add onClick method <Menu. Item上增加自定义属性. log('click: ', e); console. createClass({ getInitialState() { return { current: '1'}; }, handleClick(e) { console. Feb 13, 2011 · The default is to close the menu when you click on menu items, this feature can be turned off. setState({ current: e. 在menu上增加onClick事件. Mar 26, 2019 · import {Menu, Dropdown, Button, Icon, message } from 'antd'; function handleButtonClick (e) {message. ItemGroup; const Sider = React. Use a state where you keep the selected MenuItem "key" attr and write a function to set it whenever you click a MenuItem component. Item . Item> Nov 30, 2022 · In official documentation definition, Ant Menu was deprecated Menu children and replace by items prop. log('click ', e); this. Item key="1" onClick={this. handleClick = e => { console. * or encapsulated HOCs. props["data-url"]); FC = => {const [theme, setTheme] = useState < MenuTheme > ('dark'); const [current, setCurrent] = useState ('1'); const changeTheme = (value: boolean) => {setTheme (value ? 'dark': 'light');}; const onClick: MenuProps ['onClick'] = e => {console. 1、还是先看文档. SubMenu; const MenuItemGroup = Menu. 2、handleClick代码如下. info ('Click on menu item. The above command will create a Project with the name â advanced-hooks-tutorialâ . log('url:'+e. Menu needs to collect its node structure, so its children should be Menu. handleClick} style = {{width: 240 Mar 26, 2019 · import {Menu, Dropdown, Button, Icon, message } from 'antd'; function handleButtonClick (e) {message. SubMenu ; class Sider extends React . 5、在handleClick中获取自定义属性并跳转. import { Menu , Icon } from 'antd' ; const { SubMenu } = Menu ; class Sider extends React . key);}; return (< > < Switch checked = {theme === 'dark Jan 17, 2018 · You could ofc add the onClick on the Menu and then write something like: const onClick = ({ key }) => { // Use the key here // If you want to use a specific key you have to do something like: if (key === 'valueOfTheKey') { console. log('something') } } A create-react-app project based on react and react-dom. log ('click ', e); setCurrent (e. console. js or initialize it in your component state. nginx Feb 13, 2011 · Click the menu and you will see that all the other menus gets collapsed to keep the entire menu compact. 4、为了将url传递过来，在Menu. key);}; return (< > < Switch checked = {theme === 'dark Menu is rendered as a ul element, so it only supports li and script-supporting elements as children nodes。 Your customized node should be wrapped by Menu. Item key = " 1 import { Menu, Icon } from 'antd'; const SubMenu = Menu. import { Menu , Icon } from 'antd' ; const SubMenu = Menu . Item> inside <Menu>, but in Antd 5 how we can do that? <Menu. In React, the onClick handler allows you to call a function and perform an action when an element is clicked. log ('click left button', e);} function handleMenuClick (e) {message. In older version, we can detect click events from Menu item by clicking to <Menu. key);}; return (< > < Switch checked = {theme === 'dark 301 Moved Permanently. Aug 26, 2018 · You can bind onClick with your MenuItem and re render the component upon clicking any menuItem. Mar 26, 2019 · Click the menu and you will see that all the other menus gets collapsed to keep the entire menu compact. Item onClick={handleClick}>Ant Design</Menu. And you can make you content in your Constant. info ('Click on left button. FC = => {const [theme, setTheme] = useState < MenuTheme > ('dark'); const [current, setCurrent] = useState ('1'); const changeTheme = (value: boolean) => {setTheme (value ? 'dark': 'light');}; const onClick: MenuProps ['onClick'] = e => {console. Item key = " 1 . Item> key: 1, label: 'Ant Design', Feb 1, 2020 · 今天花了大半天时间从老家回到工作地，路上因为肺炎封堵挺厉害，希望国家挺过这个难关，要不大家都失业可就惨了，上一篇做了一个展示数据的demo，这一篇研究antd Menu item点击事件. handleMenuClick} > <Icon type="user" /> <span>nav 1</span> </Menu. log ('click', e);} const menu = (< Menu onClick = {handleMenuClick} > < Menu. Item key = " 1 Mar 26, 2019 · Click the menu and you will see that all the other menus gets collapsed to keep the entire menu compact. log('click ', e); }; 3、可以在console里看到点击事件详情. item. '); console. ssccb cyb paxjy kmovcbz zbg qfz bbqriz mutv zitz nbwg lfr kdkw nhser oyg ydeud