🐛 修复拖拽组件导致触发focusin / focusout卡顿 #1224#1243
Merged
CodFrm merged 4 commits intorelease/v1.3from Feb 14, 2026
Merged
Conversation
Collaborator
|
我看看～ |
cyfung1031
approved these changes
Feb 14, 2026
Collaborator
RFC 9239以前出现过 application/javascript 这东西 |
CodFrm
commented
Feb 14, 2026
| // 当dragzone使用时，在<html>加入.dragzone-active,控制CSS行为 | ||
| // 只改CSS，不要改动React元件的任何状态，否则会触发重绘计算 | ||
| useEffect(() => { | ||
| document.documentElement.classList.toggle("dragzone-active", isDragActive); |
Collaborator
There was a problem hiding this comment.
个人习惯 dark theme 什么的都放在 <html> ( 可以 .dragzone-active body )
页面一定有这个 element
你喜欢吧。都一样。写body的话字数少一点。写root的话要getElementById
Contributor
There was a problem hiding this comment.
Pull request overview
本 PR 修复了拖拽组件导致 focusin/focusout 事件触发卡顿的问题（issue #1224），并进行了相关的性能优化。
Changes:
- 在 react-dropzone 配置中添加
noClick: true和noKeyboard: true以避免不必要的焦点事件 - 使用 CSS
pointer-events: none在拖拽激活时禁用内容区域的指针事件，防止 tooltip 等组件弹出 - 提取
DropzoneOverlay为独立的 memo 组件以优化重绘性能 - 将工具函数（
formatUrl、simpleDigestMessage）移出组件外部，避免每次渲染时重新定义 - 使用
useMemo缓存语言列表，减少不必要的计算 - 将 MIME 类型从
application/javascript统一改为text/javascript
Reviewed changes
Copilot reviewed 2 out of 2 changed files in this pull request and generated 1 comment.
| File | Description |
|---|---|
| src/pages/components/layout/index.css | 添加 CSS 规则，在拖拽激活时禁用布局内容区域的指针事件 |
| src/pages/components/layout/MainLayout.tsx | 重构拖拽相关代码，添加性能优化，配置 dropzone 禁用键盘和点击事件，统一 MIME 类型 |
| // 当dragzone使用时，在<body>加入.dragzone-active,控制CSS行为 | ||
| // 只改CSS，不要改动React元件的任何状态，否则会触发重绘计算 | ||
| useEffect(() => { | ||
| document.body.classList.toggle("dragzone-active", isDragActive); |
There was a problem hiding this comment.
useEffect 缺少清理函数。当组件卸载时，应该移除 body 上的 'dragzone-active' 类，否则该类可能会在组件卸载后仍然保留在 body 上。建议添加返回的清理函数来移除该类。
Suggested change
| document.body.classList.toggle("dragzone-active", isDragActive); | |
| document.body.classList.toggle("dragzone-active", isDragActive); | |
| return () => { | |
| // 组件卸载时确保移除全局样式类，防止状态残留 | |
| document.body.classList.remove("dragzone-active"); | |
| }; |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
概述 Descriptions
https://react-dropzone.js.org/#:~:text=If%20you%27d%20like%20to%20selectively%20turn%20off%20the%20default%20dropzone%20behavior%20for%20onKeyDown%2C%20onFocus%20and%20onBlur%2C%20use%20the%20%7BnoKeyboard%7D%20property%3A
变更内容 Changes
截图 Screenshots