在输入中添加表情符号

Question

我正在构建一个聊天，并且正在使用一个名为的库emoji-picker-react，我想将表情符号添加到我的文本字段，然后将其作为消息发送。我正在使用 React，因此为了方便起见，我将简化代码。我的消息有效，但我的表情符号却不太有效。到目前为止，如果我先单击表情符号，然后再单击一些文本，就可以了。但如果我先输入并尝试添加表情符号，它将无法工作。另外，如果我尝试单独发送表情符号，它也不起作用。这就是我用来在文本字段中添加表情符号的方法，两者的作用相同。

这是我尝试将表情符号添加到文本字段中并执行我刚才解释的操作的地方：

const onEmojiClick = (e, emojiObject) => {
document.querySelector("#text").value += emojiObject.emoji
  // document.getElementById("text").value += emojiObject.emoji
};

这是我的输入字段：

<input
 id="text"
 style={inputStyles}
 type="text"
 placeholder="Type your message"
 value={message}
 onKeyPress={e => {
  if (e.key !== 'Enter') return;
    sendMessage(message);
  }
 }
 onChange={e => setMessageForm(e.target.value)}
/>

我确信这很简单，但我无法理解它。我希望有人能对此进行指导。

谢谢你！

Answer 1

对@lissettdm 的答案进行一点更新。

插入表情符号时的常见问题。

插入表情符号后，光标将移动到行尾。

改进的答案

光标停留在表情符号所在的位置，以便用户可以输入多个表情符号。

 const ref = useRef(null);
  const onEmojiClick = (event, emojiObject) => {
    const cursor = ref.current.selectionStart;
    
    const text = message.slice(0, cursor) + emojiObject.emoji + message.slice(cursor);
    setMessageForm(text);
    
    //Codes added for the new cursor
    const newCursor = cursor+emojiObject.emoji.length
    setTimeout(() => ref.current.setSelectionRange(newCursor,newCursor), 10)
  };

代码解释

根据您使用的表情符号包，emojiObject.emoji可能是统一的、本机的或 id 的。最常见的错误也是最大的错误是假设1个表情符号=1个字符（光标+1），但事实并非如此。

例如，如果您使用 emoji-mart，并且使用 emoji.native，则长度为 2 （而不是 1 ）。

const newCursor = cusor+emojiObject.emoji.length

下面将新的光标位置设置在emoji 后面。为什么超时？这是为了setMessage(text)在使用 ref 设置光标之前有足够的时间用新值更新 dom。

如果不使用setTimeout，光标可能无法正确更新。

setTimeout(() => ref.current.setSelectionRange(newCursor,newCursor), 10)