在 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>)