antd 使用小笔记 Menu导航菜单篇 3.26.14版本


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
<Menu
     onClick={this.handleClick.bind(this)} //点击 MenuItem 调用此函数
     selectedKeys={[this.state.current]}
     mode="horizontal" //菜单类型，现在支持垂直、水平、和内嵌模式三种 vertical horizontal inline
     onOpenChange={this.OpenChange.bind(this)} //SubMenu 展开/关闭的回调
     onSelect={this.onSelect.bind(this)}  //item被选中时调用
     theme='light'  //主题颜色
>
     <Menu.Item key="0">
         菜单一
     </Menu.Item>

     <Menu.Item
        key="1"     //item 的唯一标志
        disabled    //是否禁用
    >
         菜单二
     </Menu.Item>

     <SubMenu
        title={
           <span className="submenu-title-wrapper">
             菜单三
           </span>
         }
        onTitleClick={this.TitleClick.bind(this)}
     >
      <Menu.ItemGroup title="Item 1">
          <Menu.Item key="setting:1">Option 1</Menu.Item>
          <Menu.Item key="setting:2">Option 2</Menu.Item>
            </Menu.ItemGroup>
      </SubMenu>

      <Menu.Item key="3">
          菜单四
      </Menu.Item>
 </Menu>



state = {
    current: 'mail',
  };

  handleClick(e) {
    console.log('click ', e);
    this.setState({
      current: e.key,
    });
  };

  OpenChange(e){
    console.log('OpenChange ', e);
  }

  onSelect(e){
    console.log('onSelect ', e);
  }

  TitleClick(e){
    console.log('TitleClick ', e);
  }