React项目中输入框@触发动态选择组件功能实现方案咨询

你的初始思路确实存在偏差——普通<input>是纯文本容器，没法直接插入React组件，强行在输入框内嵌入组件还会破坏输入流，导致无法继续筛选内容。正确的做法是将输入区域改为可编辑元素（contenteditable="true"的div），配合悬浮的候选列表组件，和Telegram的交互逻辑一致：输入@时触发列表显示，后续输入内容作为筛选关键词，选中列表项后将@用户名插入输入区域，同时隐藏列表。

核心实现步骤 #

1. 封装独立的提及输入组件 #

为了支持多个输入区域各自绑定不同候选内容，每个输入区域应该是独立组件，维护自身状态：

• inputContent: 输入区域的文本内容
• showMentions: 是否显示候选列表
• mentionQuery: 当前@后的筛选关键词
• mentionStartIndex: @符号在文本中的起始位置（用于后续替换选中的用户名）
• candidates: 当前输入区域关联的候选数据（用户列表、标签列表等）

import { useState, useRef, useEffect } from 'react';

const MentionInput = ({ candidates, placeholder }) => {
  const [inputContent, setInputContent] = useState('');
  const [showMentions, setShowMentions] = useState(false);
  const [mentionQuery, setMentionQuery] = useState('');
  const [mentionStartIndex, setMentionStartIndex] = useState(-1);
  const inputRef = useRef(null);

  // 监听输入，判断是否触发@提及
  const handleInput = (e) => {
    const content = e.currentTarget.textContent;
    setInputContent(content);

    // 寻找最后一个@的位置
    const lastAtIndex = content.lastIndexOf('@');
    // 检查@是否为有效触发：后面无空格，且是最后一个可识别的触发符
    if (lastAtIndex !== -1 && (lastAtIndex === content.length - 1 || !/\s/.test(content[lastAtIndex + 1]))) {
      setShowMentions(true);
      setMentionStartIndex(lastAtIndex);
      // 提取@后的筛选关键词
      const query = content.slice(lastAtIndex + 1);
      setMentionQuery(query);
    } else {
      setShowMentions(false);
      setMentionQuery('');
      setMentionStartIndex(-1);
    }
  };

  // 筛选候选列表
  const filteredCandidates = candidates.filter(item => 
    item.name.toLowerCase().includes(mentionQuery.toLowerCase())
  );

  // 选中候选项，替换@后的内容为完整用户名
  const selectCandidate = (candidate) => {
    if (mentionStartIndex === -1) return;
    // 拼接新内容：@前部分 + @用户名 + 空格（方便继续输入）
    const newContent = inputContent.slice(0, mentionStartIndex) + `@${candidate.name} `;
    setInputContent(newContent);
    setShowMentions(false);
    // 聚焦回输入区域，光标移到末尾
    setTimeout(() => {
      inputRef.current.focus();
      const range = document.createRange();
      const selection = window.getSelection();
      range.selectNodeContents(inputRef.current);
      range.collapse(false);
      selection.removeAllRanges();
      selection.addRange(range);
    }, 0);
  };

  // 点击外部隐藏列表
  useEffect(() => {
    const handleClickOutside = (e) => {
      if (inputRef.current && !inputRef.current.contains(e.target) && !e.target.closest('.mention-list')) {
        setShowMentions(false);
      }
    };
    document.addEventListener('mousedown', handleClickOutside);
    return () => document.removeEventListener('mousedown', handleClickOutside);
  }, []);

  return (
    <div className="mention-input-container">
      <div
        ref={inputRef}
        contentEditable="true"
        className="mention-input"
        onInput={handleInput}
        placeholder={placeholder}
        dangerouslySetInnerHTML={{ __html: inputContent }}
      />
      {showMentions && filteredCandidates.length > 0 && (
        <div className="mention-list">
          {filteredCandidates.map(candidate => (
            <div
              key={candidate.id}
              className="mention-item"
              onClick={() => selectCandidate(candidate)}
            >
              {candidate.name}
            </div>
          ))}
        </div>
      )}
    </div>
  );
};

export default MentionInput;

2. 样式适配（模拟Telegram效果） #

给组件添加基础样式，让候选列表悬浮在输入框下方：

.mention-input-container {
  position: relative;
  width: 300px;
}

.mention-input {
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 8px 12px;
  min-height: 40px;
  outline: none;
}

.mention-input:empty:before {
  content: attr(placeholder);
  color: #999;
}

.mention-list {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin-top: 4px;
  border: 1px solid #ddd;
  border-radius: 8px;
  background: white;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  max-height: 200px;
  overflow-y: auto;
}

.mention-item {
  padding: 8px 12px;
  cursor: pointer;
}

.mention-item:hover {
  background: #f5f5f5;
}

3. 多输入区域使用示例 #

每个MentionInput组件独立维护状态，可传入不同的候选数据：

import MentionInput from './MentionInput';

const App = () => {
  // 用户列表候选
  const userCandidates = [
    { id: 1, name: 'Alice' },
    { id: 2, name: 'Bob' },
    { id: 3, name: 'Charlie' }
  ];

  // 标签列表候选
  const tagCandidates = [
    { id: 1, name: '前端开发' },
    { id: 2, name: 'React' },
    { id: 3, name: 'JavaScript' }
  ];

  return (
    <div style={{ padding: '20px' }}>
      <div style={{ marginBottom: '20px' }}>
        <h3>用户提及输入框</h3>
        <MentionInput candidates={userCandidates} placeholder="输入@提及用户..." />
      </div>
      <div>
        <h3>标签提及输入框</h3>
        <MentionInput candidates={tagCandidates} placeholder="输入@提及标签..." />
      </div>
    </div>
  );
};

export default App;

关键细节说明 #

• 为什么不用<input>/<textarea>：这类纯文本输入控件无法嵌入React组件，也难以精确控制光标位置和文本替换逻辑，contenteditable元素更适合处理混合内容和复杂交互。
• 独立状态管理：每个输入组件维护自身的提及状态，确保多个输入区域之间互不干扰，支持绑定完全不同的候选数据。
• 光标位置恢复：选中候选项后，通过原生Range API将光标移到输入内容末尾，保证输入流畅性。
• 外部点击隐藏：通过监听全局点击事件，点击列表和输入框外的区域时隐藏候选列表，符合用户习惯。

进阶优化方向 #

• 支持键盘导航（上下箭头选择候选项，回车确认）
• 对提及的用户名添加高亮样式（用<span>包裹并设置样式，同时处理contenteditable的内容渲染）
• 支持多个连续提及（比如@Alice @Bob）
• 处理特殊字符和换行的兼容问题

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