我来帮你搞定React输入框加表情的需求！其实核心就是实现「点击表情插入到输入框指定位置」的逻辑，下面是一步步的可复用实现方案：

1. 基础组件结构与状态管理 #

首先我们需要一个受控的输入框来管理内容，一个可切换显示/隐藏的表情面板，还要用useRef获取输入框DOM元素，用来精准操作光标位置。

import { useState, useRef } from 'react';

function EmojiInput() {
  // 管理输入框的内容状态
  const [inputValue, setInputValue] = useState('');
  // 控制表情面板的显示/隐藏
  const [showEmojiPanel, setShowEmojiPanel] = useState(false);
  // 获取输入框DOM引用，用于后续光标操作
  const inputRef = useRef(null);

  // 后续核心逻辑写在这里...

  return (
    <div className="emoji-input-container">
      <div className="input-wrapper">
        <input
          ref={inputRef}
          type="text"
          value={inputValue}
          onChange={(e) => setInputValue(e.target.value)}
          placeholder="输入内容，可插入表情..."
        />
        <button 
          onClick={() => setShowEmojiPanel(!showEmojiPanel)}
          className="emoji-btn"
        >
          😊
        </button>
      </div>
      
      {/* 表情面板（默认隐藏） */}
      {showEmojiPanel && (
        <div className="emoji-panel">
          {/* 表情列表将在这里渲染 */}
        </div>
      )}
    </div>
  );
}

export default EmojiInput;

2. 准备表情数据集 #

我们可以定义一个常用表情的数组，也可以扩展成带分类的表情集合，这里先以基础版为例：

const emojis = [
  '😀', '😃', '😄', '😁', '😆', '😅', '😂', '🤣',
  '😊', '😇', '🙂', '🙃', '😉', '😌', '😍', '🥰',
  '😘', '😗', '😙', '😚', '😋', '😛', '😝', '😜'
];

3. 核心：实现表情插入逻辑 #

这一步是关键——点击表情时，要把表情插入到当前光标位置（而不是直接追加到末尾），提升用户体验。具体步骤：

1. 获取输入框当前的光标起始/结束位置
2. 把原输入内容拆分成「光标前」和「光标后」两部分
3. 插入表情后拼接成新内容
4. 更新输入框值，并把光标移动到表情的下一个位置

const handleEmojiClick = (emoji) => {
  const input = inputRef.current;
  if (!input) return;

  const startPos = input.selectionStart;
  const endPos = input.selectionEnd;
  // 拼接插入表情后的新内容
  const newValue = 
    inputValue.substring(0, startPos) + 
    emoji + 
    inputValue.substring(endPos);

  // 更新输入框内容
  setInputValue(newValue);

  // 光标移动到表情后面，确保用户可以继续输入
  setTimeout(() => {
    input.selectionStart = input.selectionEnd = startPos + emoji.length;
    input.focus();
  }, 0);

  // 可选：插入表情后自动关闭面板
  setShowEmojiPanel(false);
};

4. 渲染表情面板并添加样式 #

把表情列表渲染到面板中，再加点基础样式让界面更友好：

// 在return的表情面板中添加表情列表：
<div className="emoji-panel">
  {emojis.map((emoji, index) => (
    <span
      key={index}
      className="emoji-item"
      onClick={() => handleEmojiClick(emoji)}
    >
      {emoji}
    </span>
  ))}
</div>

// 对应的CSS样式（可以放在组件内或外部样式文件）
<style jsx>{`
.emoji-input-container {
  position: relative;
  width: 300px;
  margin: 20px;
}
.input-wrapper {
  display: flex;
  gap: 8px;
}
input {
  flex: 1;
  padding: 8px 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 16px;
}
.emoji-btn {
  padding: 0 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
  background: #f5f5f5;
  cursor: pointer;
  font-size: 18px;
}
.emoji-panel {
  position: absolute;
  top: 45px;
  left: 0;
  width: 100%;
  padding: 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
  background: white;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  max-height: 200px;
  overflow-y: auto;
}
.emoji-item {
  font-size: 20px;
  cursor: pointer;
  padding: 4px;
  border-radius: 4px;
  transition: background 0.2s;
}
.emoji-item:hover {
  background: #f0f0f0;
}
`}</style>

额外优化建议 #

• 如果需要更丰富的表情（比如带分类、搜索功能），可以使用成熟的表情组件库，核心插入逻辑完全通用，只是表情数据源换成库提供的即可
• 支持多行输入：把input换成textarea，代码逻辑无需大改，光标位置的处理是通用的
• 移动端适配：可以调整表情面板的布局（比如底部弹出），适配触摸操作

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