如何正确设置键盘事件侦听器发送消息？

Question

我正在写一个小的聊天应用，我遇到了一些困难。应用程序正常工作，但我想设置键入事件侦听器以跟踪用户按下 enter ，以便他也可以以这种方式发送消息（不仅是手动单击 send消息按钮）。

我正在使用 firebase 和 firestore 作为保存消息的DB。这是 chat.jsx component的完整代码：

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'
import { generateRandomKey } from '../helpers/generateRandomKey'

const Chat = () => {
    const { auth, firestore } = useContext(FirebaseContext)

    const [user] = useAuthState(auth)
    const [value, setValue] = useState('')
    const [messages, loading] = useCollectionData(
        firestore.collection('messages').orderBy('createdAt')
    )

    const handleSendMessage = async () => {
        firestore.collection('messages').add({
            uid: user.uid,
            displayName: user.displayName,
            photoURL: user.photoURL,
            text: value,
            createdAt: firebase.firestore.FieldValue.serverTimestamp()
        })
        setValue('')
    } // useCallback?

    useEffect(() => {
        document.body.addEventListener('keydown', e => {
            if (e.key === 'Enter') {
                handleSendMessage()
            }
        })
        return () =>
            document.body.removeEventListener('keydown', e => {
                if (e.key === 'Enter') {
                    handleSendMessage()
                }
            })
    }, []) // what to put in deps?

    if (loading) return <Loader />

    return (
        <div className="content">
            <div>
                {messages.map(message => {
                    return (
                        <div key={generateRandomKey()}>
                            <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)}
                ></input>
                <button onClick={handleSendMessage}>Send message</button>
            </div>
        </div>
    )
}

export default Chat

谈论问题 - 当我尝试通过使用 设置事件侦听器时handlemessage依赖关系每当我按 Enter 时，它会发送两个空消息，然后发送几条类似的消息：

消息：'Hello'' - ＆gt; ' - '' - 'h' - 'He' - 'hel' - 'Hell' - 'Hello'，

useEffect(() => {
    document.body.addEventListener('keydown', e => {
        if (e.key === 'Enter') {
            handleSendMessage()
        }
    })
    return () =>
        document.body.removeEventListener('keydown', e => {
            if (e.key === 'Enter') {
                handleSendMessage()
            }
        })
}, [handleSendMessage]) 

如果我用handlesendMessage用usecallback也发生了同样的情况。 >挂钩并放置[用户，值，firestore] in Deps。

问题：如何修复此操作并正确设置keydown事件侦听器通过按下 Enter 发送消息？

Answer 1

我不小心解决了这个问题。我以错误的方式思考试图设置keydown useffect钩子中的事件侦听器。

我要做的就是在＆lt; input /＆gt; < /code>元素中设置自定义事件：

<input
    placeholder="Enter your message..."
    value={value}
    onChange={e => setValue(e.target.value)}
    onKeyDown={handleKeyDown} //this one
/> 

然后添加一个处理程序：

function handleKeyDown(e) {
    if (e.key === 'Enter') {
        if (value) {
            handleSendMessage()
        }   
    }
}

现在一切正常，我最终可以通过按来发送消息。在没有任何副作用的情况下输入键！