Javascript 在输入中添加表情符号

我正在建立一个聊天室，我正在使用一个名为

emoji picker react

的库，我想将emojis添加到我的文本字段中，然后将其作为消息发送。我正在使用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)}
/>

{
如果（e.key！=“回车”）返回；
发送消息（message）；
}
}
onChange={e=>setMessageForm（e.target.value）}
/>

我确信这件事很简单，但我无法理解。我希望有人能在这方面提供指导

---

谢谢大家!

明确设置文本输入的

值

不会触发

onChange

事件。在保存输入状态的组件中包含表情选择器，并在拾取表情时调用其setter（假设您使用功能组件，则调用

this.setState

否则），将其附加到当前状态

您可能希望使用输入元素上的

ref

及其

selectionStart

属性来读取光标位置，以将表情符号插入其中

例如，您可以这样编写输入组件

import React, { useState, useRef } from 'react'
import /* your EmojiPicker component */

const InputWithEmojiPicker = () => {
  const [value, setValue] = useState('')
  const inputRef = useRef(null)
  
  const onEmojiClick = (e, emojiObject) => {
    const { selectionStart, selectionEnd } = inputRef.current
    // replace selected text with clicked emoji
    const newVal = value.slice(0, selectionStart) + emojiObject.emoji + value.slice(selectionEnd)
    setValue(newValue)
  }

  return (
    <div>
      <input type="text" ref={inputRef} value={value} onChange={setValue} />
      {/* your EmojiPicker component with onEmojiClick */}
    </div>
  )
}

export default InputWithEmojiPicker

import React，{useState，useRef}来自“React”
导入/*您的EmojiPicker组件*/
常量InputWithEmojiPicker=（）=>{
const[value，setValue]=useState（“”）
常量inputRef=useRef（null）
const onEmojiClick=（e，emojiObject）=>{
const{selectionStart，selectionEnd}=inputRef.current
//用单击的表情符号替换所选文本
const newVal=value.slice（0，selectionStart）+emojiObject.emoji+value.slice（selectionEnd）
设置值（新值）
}
返回(
{/*使用onEmojiClick的EmojiPicker组件*/}
)
}
使用emojipicker导出默认输入

创建对

输入节点的引用，以获取光标位置并更新消息值：

  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);
  };

jsx



您可以在调用onEmojiClick函数的地方添加html部分吗？与其通过尝试直接修改输入元素的值来绕过react，不如将选定的表情符号附加到
消息
状态。react将为您更新输入值。通常情况下，您不需要手动查询react管理的任何DOM元素。这也很有效！我仍在学习如何反应一个钩子，所以我从来没有想过！这里要记住的重要一点是避免直接访问DOM元素来显式设置它们的属性。尽可能地使用State，让React填充值。当然，我知道我在React上使用纯js时做错了什么。这是一次技术考试，所以我希望我能得到初级职位的工作！谢谢：嗯，这让我想起了我为了得到一次面试而在晚上学习Vue的时候。祝你好运
<input
  id="text"
  ref={ref}
  ...
/>