React添加表情按钮出现undefined错误？emoji-picker-react新版本适配求助

修复当前emoji-picker-react的undefined错误 #

新版本的emoji-picker-react对onEmojiClick回调的参数结构做了变更，不再采用(event, emojiObject)的双参数形式，而是传入一个包含表情数据和原生事件的单对象参数。修改你的回调函数即可解决问题：

import './App.scss';
import React, { useState } from 'react'
import 'bootstrap/dist/css/bootstrap.min.css';
import Picker from 'emoji-picker-react';

function App() {
    const [chosenEmoji, setChosenEmoji] = useState(null);

    // 适配新版本的回调写法
    const onEmojiClick = (emojiClickData) => {
      setChosenEmoji(emojiClickData.emoji);
      console.log(emojiClickData.emoji);
    };
  
    return (
      <div className="App">
        <header className="App-header">
          {chosenEmoji ? (
            <span>You chose: {chosenEmoji.emoji}</span>
          ) : (
            <span>No emoji Chosen</span>
          )}
          <Picker onEmojiClick={onEmojiClick} />
        </header>
      </div>
    );
}

export default App;

如果需要获取点击事件的原生对象，可以通过emojiClickData.nativeEvent访问。

替代表情组件推荐 #

如果不想适配新版本，或需要更符合需求的样式自定义能力，可选择以下组件：

• emoji-mart：成熟的表情选择器，支持自定义主题、布局尺寸，样式可通过CSS深度定制，文档全面。使用示例：

  import { Picker } from 'emoji-mart';
  import 'emoji-mart/css/emoji-mart.css';
  
  // 组件内调用
  <Picker onSelect={(emoji) => setChosenEmoji(emoji)} />
  

• @joeattardi/emoji-picker：轻量级组件，体积小，支持自定义样式类名，适合对包体积有要求的场景。
• react-emoji-picker：极简风格的选择器，基础功能完善，可通过覆盖默认CSS规则快速调整样式。

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