解决MUI TextField显示emoji-picker-react选中表情为[object Object]问题

核心问题修复：将Emoji对象转为可显示的表情字符 #

emoji-picker-react的onEmojiClick回调返回的是Emoji对象，而非直接的表情字符串，直接赋值会被转为[object Object]。你需要从对象中提取emoji字段（这是实际的表情字符），再添加到输入框内容中。

关键代码修改 #

1. 调整表情选中事件处理逻辑：

const handleEmojiClick = (emoji: EmojiClickData) => {
  // 提取表情字符，追加到现有输入内容后
  setInput(prevInput => prevInput + emoji.emoji);
};

2. 确保TextField的value和onChange正确绑定状态：

<TextField
  fullWidth
  multiline
  value={input}
  onChange={(e) => setInput(e.target.value)}
  placeholder="输入内容或选择表情"
/>

同时处理文字与表情输入的状态管理 #

用useState<string>统一管理输入内容（文字+表情字符混合的字符串）：

• 文字输入：通过TextField的onChange直接更新状态
• 表情选择：通过onEmojiClick提取表情字符，追加到现有状态后

完整示例代码 #

import { useState } from 'react';
import { TextField } from '@mui/material';
import EmojiPicker, { EmojiClickData } from 'emoji-picker-react';

export default function App() {
  const [input, setInput] = useState<string>('');
  const [showPicker, setShowPicker] = useState<boolean>(false);

  const handleEmojiClick = (emoji: EmojiClickData) => {
    setInput(prev => prev + emoji.emoji);
    setShowPicker(false);
  };

  return (
    <div style={{ padding: '20px', maxWidth: '600px', margin: '0 auto' }}>
      <TextField
        fullWidth
        multiline
        rows={4}
        value={input}
        onChange={(e) => setInput(e.target.value)}
        placeholder="输入文字或点击按钮选择表情"
        style={{ marginBottom: '10px' }}
      />
      <button onClick={() => setShowPicker(!showPicker)}>
        {showPicker ? '关闭表情选择器' : '打开表情选择器'}
      </button>
      {showPicker && <EmojiPicker onEmojiClick={handleEmojiClick} />}
    </div>
  );
}

为什么原生输入框也会出现同样问题？ #

原生<input>或<textarea>同样只接受字符串值，直接传入Emoji对象会被强制转为字符串[object Object]，所以必须先提取emoji字段转为字符串后再赋值。

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