在 [email protected] 中获取未定义的表情符号

Question

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

function ChatInput() {
    const [msg,setMsg] = useState('')
    const [showEmojiPicker,setShowEmojiPicker] = useState(false);

    const handleShowEmoji = () => {
        setShowEmojiPicker(!showEmojiPicker);
    }

    const handleEmojiClick = (event,emojiObject) => {
        console.log(emojiObject);
        let message = msg;
        message += emojiObject.emoji;
        setMsg(message);
    }

  return (
    <Container>
        <div className="button-container">
            <div className="emoji">
                <BsEmojiSmileFill onClick={handleShowEmoji}/>
                {showEmojiPicker && <Picker onEmojiClick={handleEmojiClick}/> }
            </div>
        </div>
        <form className='input-container'>
            <input type='text' placeHolder='type your message here' value={msg} onChange={(e) => setMsg(e.target.value)}/>
            <button className='submit'>
                <IoMdSend/>
            </button>
        </form>
    </Container>
    )
}

consoling 控制台中的 emojiObject 在下面得到这个

PointerEvent {isTrusted: true, pointerId: 1, width: 1, height: 1, pressure: 0, …}

也出现 404 错误

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

我的

emoji-picker-react version is 4.3.0

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);

Answer 2

卸载当前

emoji-picker-react

版本

4.3.0

并安装以前版本的

[email protected]

后解决了我的问题

Answer 3

安装 [email protected] 版本。它会工作。

Answer 4

用这个////// const onEmojiClick = (事件) => { console.log(event.emoji);} 现在是白大事件