React中如何将表情动态拼接至状态变量new_chat？

架构老林

2026-6-20

问题解决：点击表情添加到输入框

核心问题分析

状态类型不匹配：new_chat初始设为数组[]，但input的value要求是字符串类型，导致状态更新和拼接逻辑异常。
onClick事件错误：直接写new_chat.concat('👍')只是执行了字符串拼接，但没有调用set_new_chat更新状态；同时onClick需要传入一个函数，而非直接执行的表达式。

修正后的代码实现

1. 修正状态变量初始值

把new_chat的初始状态改为空字符串，匹配input的value类型：

const [chats, setchat] = useState([]);
const [new_chat, set_new_chat] = useState(""); // 改为字符串初始值

2. 编写通用的添加表情函数

用函数式更新确保每次都基于最新的输入状态拼接表情：

function handlechat(event){
  set_new_chat(event.target.value);
}

function add_chat(){
  if(new_chat.trim()!=""){
    setchat(c => [...c, {text: new_chat, time: new Date()}]);
    set_new_chat("");
    console.log("new chat added");
  }
}

// 新增添加表情的函数
function addEmoji(emoji) {
  set_new_chat(prevChat => prevChat + emoji);
}

3. 修正表情块的点击事件

给表情元素绑定addEmoji函数，传递对应的表情符号：

<input type="text" id="input_text" value={new_chat} onChange={handlechat} />

<!-- 单个表情示例 -->
<div className="emoji_container" style={{fontSize: "1.5em", cursor: "pointer"}} onClick={() => addEmoji('👍')}>👍</div>

4. 批量渲染表情栏（可选）

如果有多个表情，用循环渲染更高效：

const emojis = ['👍', '😂', '😎', '😢', '🤔'];

<div className="emoji_bar" style={{display: "flex", gap: "8px", padding: "8px"}}>
  {emojis.map(emoji => (
    <div 
      key={emoji}
      className="emoji_container" 
      style={{fontSize: "1.5em", cursor: "pointer"}}
      onClick={() => addEmoji(emoji)}
    >
      {emoji}
    </div>
  ))}
</div>