freefire/jiang13-forum
2
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 4 Wiki Activity

fix(comment): 修复评论框提交后重置和聚焦的问题

Browse Source 
1. 为CommentEditor的focus方法添加preventScroll可选参数并透传调用
2. 使用ref记录上次提交计数，避免首次挂载时重复清空输入框
3. 仅在submitCount实际变化时重置表单并聚焦编辑器
This commit is contained in:
姜十三
2026-08-08 15:09:43 +08:00
parent 536707f812
commit 4f42a2faff
2 changed files with 6 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
frontend/src/components/CommentBox.tsx
View File

@@ -30,6 +30,7 @@ export default function CommentBox({ user, replyTo, inline, submitting, submitCo
const [content, setContent] = useState(''); const [content, setContent] = useState('');
const [isPrivate, setIsPrivate] = useState(false); const [isPrivate, setIsPrivate] = useState(false);
const editorRef = useRef<CommentEditorHandle>(null); const editorRef = useRef<CommentEditorHandle>(null);
const prevSubmitCountRef = useRef<number>(submitCount);
useEffect(() => { useEffect(() => {
if (inline && replyTo) { if (inline && replyTo) {
@@ -38,6 +39,9 @@ export default function CommentBox({ user, replyTo, inline, submitting, submitCo
}, [replyTo?.id, inline]); }, [replyTo?.id, inline]);
useEffect(() => { useEffect(() => {
// 跳过首次挂载，仅在 submitCount 真正变化（评论成功提交）时清空并聚焦
if (prevSubmitCountRef.current === submitCount) return;
prevSubmitCountRef.current = submitCount;
setContent(''); setContent('');
setIsPrivate(false); setIsPrivate(false);
editorRef.current?.focus(); editorRef.current?.focus();

4
frontend/src/components/CommentEditor.tsx
View File

@@ -26,7 +26,7 @@ import type { Sticker } from '../data/stickers';
export interface CommentEditorHandle { export interface CommentEditorHandle {
getHTML: () => string; getHTML: () => string;
isEmpty: () => boolean; isEmpty: () => boolean;
focus: () => void; focus: (options?: { preventScroll?: boolean }) => void;
} }
interface Props { interface Props {
@@ -160,7 +160,7 @@ const CommentEditor = forwardRef<CommentEditorHandle, Props>(function CommentEdi
useImperativeHandle(ref, () => ({ useImperativeHandle(ref, () => ({
getHTML: () => editor ? sanitizeHtml(editor.getHTML()) : value, getHTML: () => editor ? sanitizeHtml(editor.getHTML()) : value,
isEmpty: () => editor ? isEditorEmpty(editor) : !value.trim(), isEmpty: () => editor ? isEditorEmpty(editor) : !value.trim(),
focus: () => { editor?.commands.focus(); }, focus: (options?: { preventScroll?: boolean }) => { editor?.commands.focus(options); },
}), [editor, value]); }), [editor, value]);
const insertSticker = useCallback((sticker: Sticker) => { const insertSticker = useCallback((sticker: Sticker) => {