feat：点击元素外部事件后关闭菜单

src/components/ItemTree/index.jsx

@@ -166,6 +166,7 @@ const ItemTree = (prop) => {
     const [defaultValueState, setDefaultValueState] = useState(flushTree(prop.filePath));
     generateList(defaultValueState);
     const [state, setState] = useState();
+    const [inFrame, setInFrame] = useState(true);
     useEffect(() => {
         setDefaultValueState(flushTree(prop.filePath))
     }, [prop]);
@@ -294,7 +295,18 @@ const ItemTree = (prop) => {
         });
     }
     const getNodeTreeRightClickMenu = () => {
-        console.log("state", state, isEmpty(state))
+        useEffect(() => {
+            const handleKeyDown = (event) => {
+                if (!inFrame) {
+                    event.preventDefault(); // 阻止默认行为
+                    setState("");
+                }
+            };
+            document.addEventListener('click', handleKeyDown);
+            return () => {
+                document.removeEventListener('click', handleKeyDown);
+            };
+        });
         if (isEmpty(state)) {
             return
         }
@@ -321,6 +333,7 @@ const ItemTree = (prop) => {
             menuItem.push(getMenuItem('6',<DirDeleteFile filePath={key} />))
         }
         menuItem.push(getMenuItem('7',<OpenInDir filePath={key} />))
+
         return <Fragment>
             {createPortal(
                 <Menu style={tmpStyle}  onClick={e =>
@@ -328,7 +341,18 @@ const ItemTree = (prop) => {
                                 console.log('onClick',e)
                             }
                         }
-                      onMouseLeave={e => {setState("");}}
+                      // 鼠标离开
+                      onMouseLeave={e => {
+                          console.log('onMouseLeave',e)
+                          // setState("");
+                          setInFrame(false)
+                      }}
+                      // 鼠标进入
+                      onMouseEnter={e => {
+                          console.log('onMouseEnter',e)
+                          // setState("");
+                          setInFrame(true)
+                      }}
                       items={menuItem}>
                 </Menu>,
                 document.body