ReactJS中如何获取输入框光标位置以实现Emoji精准插入？

嘿，这个需求我之前做聊天系统的时候正好实现过！要让emoji插入到光标所在位置而不是末尾，关键就是要先拿到输入框的光标位置，再把emoji插入到对应位置。下面给你详细讲怎么操作：

首先得能获取到输入框的DOM元素，React里可以用createRef（类组件）或者useRef（函数组件）来实现。看你的代码是类组件风格，那就在构造函数里创建一个ref：

constructor(props) {
  super(props);
  this.state = { message: '' };
  this.inputRef = React.createRef(); // 初始化ref
}

然后把这个ref绑定到你的输入框上：

<input
  type="text"
  ref={this.inputRef}
  value={this.state.message}
  onChange={(e) => this.setState({ message: e.target.value })}
  // 其他属性...
/>

当用户点击表情选择器里的emoji时，先拿到输入框的光标位置。输入框DOM元素有两个关键属性：

• selectionStart：光标起始位置（如果没选中内容，和selectionEnd值相同）
• selectionEnd：光标结束位置（选中文本时，这个值会大于selectionStart）

接下来把当前输入内容切成两部分，把emoji插在中间，同时还能处理“替换选中文本为emoji”的场景，一举两得：

handleEmojiClick = (emoji) => {
  const inputElement = this.inputRef.current;
  if (!inputElement) return; // 确保输入框DOM已挂载

  const { selectionStart, selectionEnd } = inputElement;
  const currentMessage = this.state.message;

  // 拼接新的消息：光标前的内容 + emoji + 光标后的内容
  const newMessage = 
    currentMessage.slice(0, selectionStart) + 
    emoji.native + 
    currentMessage.slice(selectionEnd);

  // 更新state，并且在更新完成后调整光标位置
  this.setState({ message: newMessage }, () => {
    // 让输入框重新获得焦点
    inputElement.focus();
    // 把光标移到插入的emoji后面，提升用户体验
    const newCursorPos = selectionStart + emoji.native.length;
    inputElement.selectionStart = inputElement.selectionEnd = newCursorPos;
  });
}

• 为什么不用await this.setState？因为setState的异步操作不需要用await（它本身不返回Promise，除非你自己封装），用回调函数来处理更新后的光标调整更可靠。
• 处理选中文本的情况：如果用户选中了一段文字再点击emoji，上面的代码会自动把选中的文字替换成emoji，和Twitter的交互逻辑一致。
• 函数组件适配：如果是用函数组件开发，只需要把createRef换成useRef，逻辑完全一样。

给你一个完整的类组件示例，你可以直接参考：

class ChatInput extends React.Component {
  constructor(props) {
    super(props);
    this.state = { message: '' };
    this.inputRef = React.createRef();
  }

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

    const { selectionStart, selectionEnd } = inputElement;
    const currentMessage = this.state.message;
    const newMessage = currentMessage.slice(0, selectionStart) + emoji.native + currentMessage.slice(selectionEnd);

    this.setState({ message: newMessage }, () => {
      inputElement.focus();
      inputElement.selectionStart = inputElement.selectionEnd = selectionStart + emoji.native.length;
    });
  }

  render() {
    return (
      <div className="chat-input-container">
        <input
          ref={this.inputRef}
          value={this.state.message}
          onChange={(e) => this.setState({ message: e.target.value })}
          placeholder="输入消息..."
        />
        {/* 假设你的表情选择器组件是EmojiPicker，点击emoji时触发handleEmojiClick */}
        <EmojiPicker onEmojiSelect={this.handleEmojiClick} />
      </div>
    );
  }
}

这样就能实现和Twitter一样的光标位置插入emoji的效果啦！

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