React中如何正确设置keydown事件监听器实现回车发送消息

算力阿峰

2026-9-1

问题根因

你遇到的重复发消息、逐字拼接发消息的问题由几个核心错误共同导致：

事件监听器清理逻辑完全失效：addEventListener和removeEventListener必须传入同一个函数引用才能正确绑定/移除，你在两个方法里分别写了逻辑相同的匿名箭头函数，本质是两个完全独立的函数，旧的监听器根本不会被移除。每次组件重渲染都会新增一个全局keydown监听器，越积越多。
闭包值捕获异常：所有残留的监听器会分别捕获对应渲染周期内的value状态值，按一次回车会同时触发所有监听器，就会出现从空字符串、单字到完整输入内容逐次发送的异常现象。
全局事件绑定不符合交互逻辑：把keydown绑在document.body上意味着用户不管焦点在页面哪个位置（比如正在点其他按钮、输其他表单），按回车都会触发消息发送，不符合常规聊天工具的交互预期。
缺少空值校验：发送逻辑没有判断输入内容是否为空，空字符串也会被写入Firestore。
列表key使用错误：渲染消息列表时每次都调用generateRandomKey()生成key，会导致每次重渲染都生成全新的key，引发不必要的DOM重绘甚至渲染异常。
隐性依赖缺失：原代码使用了useContext、useState等React Hooks，却没有从react包导入，会直接触发运行错误。

最优修复方案

不需要用useEffect绑定全局事件，直接给输入框绑定onKeyDown事件即可，逻辑更简洁，也完全规避监听器泄漏问题，修复后的完整组件代码如下：

// 补全缺失的React Hooks导入
import { useContext, useState } from 'react'
import { useAuthState } from 'react-firebase-hooks/auth'
import { FirebaseContext } from '..'
import { useCollectionData } from 'react-firebase-hooks/firestore'
import firebase from 'firebase/compat/app'
import Loader from './loader/Loader'

const Chat = () => {
    const { auth, firestore } = useContext(FirebaseContext)
    const [user] = useAuthState(auth)
    const [value, setValue] = useState('')
    // 增加idField配置，直接获取Firestore文档的唯一ID作为列表key
    const [messages, loading] = useCollectionData(
        firestore.collection('messages').orderBy('createdAt'),
        { idField: 'id' }
    )

    const handleSendMessage = async () => {
        // 空值校验，trim后为空直接返回，不发送空消息
        const trimmedText = value.trim()
        if (!trimmedText) return

        await firestore.collection('messages').add({
            uid: user.uid,
            displayName: user.displayName,
            photoURL: user.photoURL,
            text: trimmedText,
            createdAt: firebase.firestore.FieldValue.serverTimestamp()
        })
        setValue('')
    }

    // 输入框回车事件处理，直接绑在元素上，不需要全局监听
    const handleKeyDown = (e) => {
        if (e.key === 'Enter') {
            handleSendMessage()
        }
    }

    if (loading) return <Loader />

    return (
        <div className="content">
            <div>
                {messages.map(message => {
                    return (
                        // 用Firestore文档ID作为唯一key，替代随机生成key
                        <div key={message.id}>
                            <div>
                                <img
                                    src={message.photoURL}
                                    alt="User avatar"
                                />
                                <p>{message.displayName}</p>
                            </div>
                            <p>{message.text}</p>
                        </div>
                    )
                })}
            </div>
            <div>
                <input
                    placeholder="Enter your message..."
                    value={value}
                    onChange={e => setValue(e.target.value)}
                    onKeyDown={handleKeyDown}
                />
                <button onClick={handleSendMessage}>Send message</button>
            </div>
        </div>
    )
}

export default Chat

关键修改说明

移除了全局keydown事件绑定逻辑，直接在输入框元素上绑定onKeyDown事件：只有输入框处于聚焦状态时按回车才会触发发送，完全符合常规聊天产品交互，也从根源上避免了事件监听器重复绑定、内存泄漏、闭包值捕获异常的问题。
增加空值校验：发送前对输入内容做trim处理，内容为空时直接终止逻辑，避免发送无意义的空消息。
修复列表key问题：通过useCollectionData的配置项拿到Firestore自动生成的文档唯一ID作为列表key，替代每次渲染随机生成的key，避免DOM异常重绘。
补全了缺失的React Hooks导入，消除隐性运行错误。
如果你确实有场景需要绑定全局键盘事件，一定要把事件处理函数抽成组件作用域内的具名函数，保证addEventListener和removeEventListener传入的是同一个函数引用，才能正确清理监听器。

内容的提问来源于stack exchange，提问作者Ilya Kruchinin