React中使用emoji-picker组件无法输入多个表情的技术求助

我来帮你搞定这个问题！你现在遇到的核心问题是状态管理逻辑混乱，加上输入框的事件处理和值绑定没对应上，导致新表情总是替换旧内容，甚至无法正确处理用户输入的文字。

问题分析 #

1. 状态类型不匹配：你初始化了数组状态[emoji, setEmoji] = useState([])，但点击表情时直接把单个emojiObject赋值给了状态，输入框又试图取emoji.emoji——当状态是数组时这个属性根本不存在，当状态是单个表情对象时，新选择的表情会直接覆盖旧的。
2. 输入框处理错误：你在onChange里把输入值追加到数组里，这不符合输入框文本的存储逻辑，输入框的内容应该是一个字符串，而不是数组。

解决方案 #

我们需要把状态改成存储输入框的完整文本字符串，不管是用户输入的文字还是选择的表情，都直接追加到这个字符串里：

1. 把状态初始化为空字符串，用来保存输入框的所有内容
2. 点击表情时，将选中的表情符号追加到现有文本末尾
3. 输入框的onChange直接更新状态为输入的完整文本，value绑定这个状态

修正后的完整代码 #

import React, { useState } from "react";
import Picker, { SKIN_TONE_MEDIUM_DARK } from "emoji-picker-react";

const App = () => {
  // 用字符串状态存储输入框的完整内容
  const [inputValue, setInputValue] = useState("");

  const onEmojiClick = (event, emojiObject) => {
    // 追加新表情到现有文本末尾，使用函数式更新确保拿到最新状态
    setInputValue(prevValue => prevValue + emojiObject.emoji);
  };

  return (
    <div>
      <Picker onEmojiClick={onEmojiClick} skinTone={SKIN_TONE_MEDIUM_DARK} />
      {/* 输入框直接绑定inputValue，onChange正常更新状态 */}
      <input 
        type="text" 
        id="input" 
        onChange={e => setInputValue(e.target.value)} 
        value={inputValue} 
      />
    </div>
  );
};

export default App;

关键说明 #

• 使用函数式更新setInputValue(prevValue => ...)来获取最新的状态值，避免因为状态更新的异步特性导致的错误
• 输入框的value直接绑定状态字符串，这样不管是输入文字还是添加表情，都会实时同步显示
• 点击表情时，我们只需要取emojiObject.emoji（表情符号本身），追加到现有文本即可

这样修改后，用户既可以输入普通文字，也可以多次选择表情添加到输入框里，不会再出现替换的问题啦！

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