在 Reactjs 中使用表情符号选择器 package

Question

我正在尝试为输入框实现表情符号选择器。 这是我第一次使用它，我在使用时遇到了问题。 我不能让用户输入多个表情符号。 之前选择的表情符号总是替换前一个。 有人可以帮我吗？ 现在我决定在沙箱中测试它，但如果我能够将它拉出来，我将在项目中使用它。 这是代码：

import React, { useState } from "react";
import Picker, { SKIN_TONE_MEDIUM_DARK } from "emoji-picker-react";

const App = () => {

  const [emoji, setEmoji] = useState([])

  const onEmojiClick = (event, emojiObject) => {
    setEmoji(emojiObject);
  };


  return (
    <div>
      <Picker onEmojiClick={onEmojiClick} skinTone={SKIN_TONE_MEDIUM_DARK} />

      <input
        type="text"
        id="input"
        onChange={e => setEmoji([...emoji, e.target.value])}
        value={emoji.emoji}
      />

    </div>
  );
};

export default App;

Answer 1

那是因为您正在覆盖表情符号的 state。 也许您可以将它们存储在一个数组中并执行以下操作：

setUseEmoji([...useEmoji, newEmoji])

然后 map 在你想显示它们时覆盖它们

useEmoji.map((emoji) => <div> {emoji} </div>)

Answer 2

从一开始就将其设置为数组

来自： const [emoji, setEmoji] = useState({})

to: const [emoji, setEmoji] = useState([])

然后像这样设置它： setEmoji([...emoji, e.target.value])

然后像这样迭代它：

emoji.map((emj) => <div> {emj} </div>)或者如果它是 object：

emoji.map((emj) => <div> {emj.propertyValue} </div>)