在 ReactJS 中创建表情符号选择器

在 ReactJS 中创建一个表情符号选择器可以让用户轻松地在你的应用程序中选择和插入表情符号。在本文中，我们将讨论如何在 ReactJS 中实现这一目标。

准备工作

在开始创建表情符号选择器之前，你需要确保已经安装了 ReactJS。你还需要在你的应用程序中添加一个用于存储表情符号列表的数组。我们将在下面的代码片段中使用一个简单的数组来存储表情符号。

const emojis = [
  "😀", "😃", "😄", "😁", "😆", "😅", "😂", "🤣",
  "😊", "😇", "🙂", "🙃", "😉", "😛", "😝", "😜",
  "😋", "😎", "😘", "😍", "😚", "😙", "🥰", "😻",
  "💋", "👄", "💔", "💕", "❤️‍🔥", "❤️‍🩹", "❤️", "🧡"
];

创建表情符号列表

我们将首先创建一个可以显示表情符号列表的组件。这个组件将显示我们刚才定义的表情符号数组。我们可以使用 map 方法来遍历这个数组并创建一个包含表情符号的列表。

import React from "react";

const EmojiList = ({ emojis }) => {
  return (
    <ul>
      {emojis.map((emoji) => (
        <li key={emoji}>{emoji}</li>
      ))}
    </ul>
  );
};

export default EmojiList;

这样我们就创建了一个可以显示表情符号列表的组件。现在我们将在这个列表上添加一些交互功能，以便用户可以选择和插入表情符号。

添加交互功能

要使表情符号列表具有交互功能，我们需要在每个表情符号上添加点击事件处理程序。当用户单击一个表情符号时，我们将触发一个事件并将该表情符号的值传递给父组件。

import React from "react";

const EmojiList = ({ emojis, onEmojiSelect }) => {
  const handleEmojiClick = (emoji) => {
    onEmojiSelect(emoji);
  };

  return (
    <ul>
      {emojis.map((emoji) => (
        <li key={emoji} onClick={() => handleEmojiClick(emoji)}>
          {emoji}
        </li>
      ))}
    </ul>
  );
};

export default EmojiList;

现在，我们已经为每个表情符号添加了点击事件处理程序，并且可以将所选的表情符号的值传递给父组件。接下来，我们将在父组件中处理这些值并将它们插入到应用程序中。

在父组件中显示所选表情符号

现在，我们已经可以处理所选表情符号的值，并将它们传递给父组件。在父组件中，我们将创建一个文本框，用户可以在其中插入表情符号。当用户选择一个表情符号时，我们将在文本框中插入该符号的值。

import React, { useState } from "react";
import EmojiList from "./EmojiList";

const EmojiPicker = ({ emojis }) => {
  const [selectedEmoji, setSelectedEmoji] = useState("");

  const handleEmojiSelect = (emoji) => {
    setSelectedEmoji(emoji);
  };

  const handleInputChange = (e) => {
    setSelectedEmoji(e.target.value);
  };

  return (
    <div>
      <input type="text" value={selectedEmoji} onChange={handleInputChange} />
      <EmojiList emojis={emojis} onEmojiSelect={handleEmojiSelect} />
    </div>
  );
};

export default EmojiPicker;

我们使用了 React Hooks API 来在父组件中存储所选表情符号的值，并使用了 onChange 事件处理程序来更新该值。然后，我们将所选表情符号的值作为属性传递给表情符号列表组件，并处理事件以更新所选表情符号的值。

示例

这是一个完整的示例代码，在这个代码中我们创建了一个表情符号选择器，并将其插入到应用程序中。

import React, { useState } from "react";
import EmojiList from "./EmojiList";

const emojis = [
  "😀", "😃", "😄", "😁", "😆", "😅", "😂", "🤣",
  "😊", "😇", "🙂", "🙃", "😉", "😛", "😝", "😜",
  "😋", "😎", "😘", "😍", "😚", "😙", "🥰", "😻",
  "💋", "👄", "💔", "💕", "❤️‍🔥", "❤️‍🩹", "❤️", "🧡"
];

const EmojiPicker = ({ emojis }) => {
  const [selectedEmoji, setSelectedEmoji] = useState("");

  const handleEmojiSelect = (emoji) => {
    setSelectedEmoji(emoji);
  };

  const handleInputChange = (e) => {
    setSelectedEmoji(e.target.value);
  };

  return (
    <div>
      <input type="text" value={selectedEmoji} onChange={handleInputChange} />
      <EmojiList emojis={emojis} onEmojiSelect={handleEmojiSelect} />
    </div>
  );
};

const App = () => {
  return (
    <div>
      <h1>Emoji Picker</h1>
      <EmojiPicker emojis={emojis} />
    </div>
  );
};

export default App;

结论

在本文中，我们介绍了如何在 ReactJS 中创建一个表情符号选择器。我们从一个简单的表情符号数组开始，并使用 React Hooks API 和事件处理程序来创建交互式组件。最后，我们将这个组件插入到我们的应用程序中，让用户使用它来选择和插入表情符号。