javascript - 将表情符号添加到输入

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 emoji = 1 个字符(光标+1)，事实并非如此。

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

const newCursor = cusor+emojiObject.emoji.length

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

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

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