menu/docs/examples/items-ref.tsx at 05afa48c70fe9752530c1fa9ec3fe2d5b20926e1 · react-component/menu · GitHub

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
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
/* eslint no-console:0 */

import React, { useRef } from 'react';
import '../../assets/index.less';
import Menu from '../../src';

export default () => {
  const ref1 = useRef<HTMLLIElement>(null);
  const ref2 = useRef<HTMLLIElement>(null);
  const ref3 = useRef<HTMLLIElement>(null);
  const ref4 = useRef<HTMLLIElement>(null);
  const ref5 = useRef<HTMLLIElement>(null);
  const ref6 = useRef<HTMLLIElement>(null);
  const ref7 = useRef<HTMLLIElement>(null);

  return (
    <>
      <button
        onClick={() => {
          console.log(ref1.current);
          console.log(ref2.current);
          console.log(ref3.current);
          console.log(ref4.current);
          console.log(ref5.current);
          console.log(ref6.current);
          console.log(ref7.current);
        }}
      >
        获取 Ref
      </button>
      <Menu
        items={[
          {
            // MenuItem
            label: 'Top Menu Item',
            key: 'top',
            ref: ref1,
          },
          {
            // MenuGroup
            type: 'group',
            label: 'Top Menu Group without children',
            ref: ref2,
          },
          {
            // MenuGroup
            type: 'group',
            label: 'Top Menu Group with children',
            ref: ref3,
            children: [
              {
                // MenuItem
                label: 'Menu Item 1',
                key: 'inner1',
              },
              {
                // Divider
                type: 'divider',
              },
              {
                // MenuItem
                label: 'Menu Item 2',
                key: 'inner2',
                ref: ref4,
              },
            ],
          },
          {
            // SubMenu
            label: 'SubMenu',
            key: 'sub1',
            ref: ref5,
            children: [
              {
                // MenuItem
                label: 'Menu Item 1-1',
                key: 'inner11',
                ref: ref6,
              },

              {
                // SubMenu
                label: 'SubMenu inner',
                key: 'sub1-1',
                ref: ref7,
                children: [
                  {
                    // MenuItem
                    label: 'Menu Item 111',
                    key: 'inner1-1-1',
                  },
                ],
              },
            ],
          },
        ]}
      />
    </>
  );
};