如何使用emoji mart设置文本区的emoji快捷码？

Question

我的项目是javascript。我刚刚看到了emoji mart，我在react中创建了一个emoji选择器，然后转换并注入到我的应用程序中。我按照预期进行了正确的渲染。现在，我有一个问题，比如在emoji mart中点击emoji，我如何将该emoji设置为我的文本区。请帮帮我。下面我附上了一个屏幕截图。

​

​

Answer 1

你可以用原生来简化它。

addEmoji = emoji => {
  this.setState({
     content: `${this.state.content}${emoji.native}`
  });
}

Answer 2

我是通过遵循这个教程https://medium.com/@allegra9/add-emoji-picker-to-your-react-chat-app-30d8cbe8d9a6来实现的。

它看起来是这样的：

addEmoji = e => {
    console.log(e)
    let sym = e.unified.split('-');
    let codesArray = [];

    sym.forEach(el => codesArray.push('0x' + el));
     //console.log(codesArray)  // ["0x1f3f3", "0xfe0f"]
    let emojiPic = String.fromCodePoint(...codesArray); //("0x1f3f3", "0xfe0f")

    this.setState({
         content: `${this.state.content}${emojiPic}`
    });
}

Answer 3

您可以尝试以下操作：

const [input, setInput] = useState("");
<Picker set="apple" emojiSize={34} showPreview={false} color={"#009688"} onSelect={emoji => setInput(input + emoji.native)}
<form>
    <input value={input} onChange={e => setInput(e.target.value)} placeholder="Type a message" type="text"/>
    <button onClick={sendMessage} type="submit"> Send a message</button>
</form>