在 emoji-picker-react@4.3.0 中获取未定义的表情符号

Question

我正在为聊天应用程序实现表情符号选择器。因此，当用户在输入中键入消息并单击表情符号选择器时，当选择特定表情符号时，我想显示所选表情符号以及用户键入的消息。相反，当用户单击表情符号时，它会显示未定义并在控制台中出现一些错误。

\n

function ChatInput() {\n    const [msg,setMsg] = useState('')\n    const [showEmojiPicker,setShowEmojiPicker] = useState(false);\n\n    const handleShowEmoji = () => {\n        setShowEmojiPicker(!showEmojiPicker);\n    }\n\n    const handleEmojiClick = (event,emojiObject) => {\n        console.log(emojiObject);\n        let message = msg;\n        message += emojiObject.emoji;\n        setMsg(message);\n    }\n\n  return (\n    <Container>\n        <div className="button-container">\n            <div className="emoji">\n                <BsEmojiSmileFill onClick={handleShowEmoji}/>\n                {showEmojiPicker && <Picker onEmojiClick={handleEmojiClick}/> }\n            </div>\n        </div>\n        <form className='input-container'>\n            <input type='text' placeHolder='type your message here' value={msg} onChange={(e) => setMsg(e.target.value)}/>\n            <button className='submit'>\n                <IoMdSend/>\n            </button>\n        </form>\n    </Container>\n    )\n}\n

\n

在控制台中安慰 emojiObject 得到下面的结果

\n

PointerEvent\xc2\xa0{isTrusted: true, pointerId: 1, width: 1, height: 1, pressure: 0,\xc2\xa0\xe2\x80\xa6}\n

\n

还出现 404 错误

\n

cdn.jsdelivr.net/npm/emoji-datasource-apple/img/apple/64/2695-fe0f.png:1          GET https://cdn.jsdelivr.net/npm/emoji-datasource-apple/img/apple/64/2695-fe0f.png 404\n

\n

我的emoji-picker-react version is 4.3.0

\n

Answer 1

文档称onEmojiClick属性接收一个“单击表情符号时调用的回调函数。该函数接收表情符号对象作为参数”。

另外，它的定义如下：

onEmojiClick: (emojiData: EmojiClickData, event: MouseEvent) => void

第一个参数是表情符号对象，第二个参数是事件。在你的handleEmojiClick中你做了相反的顺序，这就是它返回未定义的原因。

你也可以这样做：

<Picker onEmojiClick={(emojiObject)=> setMsg((prevMsg)=> prevMsg + emojiObject.emoji)}/> 

这样您就不需要“handleEmojiClick”，并且还可以正确使用基于先前状态的更新状态的函数版本，而不是手动执行此操作

let message = msg; message += emojiObject.emoji; setMsg(message);