如何在NextJS中创建表情选择器

表情符号已经成为现代通信的重要组成部分。在本教程中，我们将学习如何在NextJS中创建一个表情选择器，NextJS是一个流行的基于React的用于构建服务器呈现应用程序的框架。

表情选择器是一个UI组件，用于显示一系列表情符号，并允许用户选择一个或多个表情符号以在其文本中使用。一个设计良好的表情选择器可以改善用户体验，并增加您网站的参与度。在本教程中，我们将创建一个表情选择器，该选择器显示一个表情符号的网格，并在状态中更新所选的表情符号。

在NextJS中创建表情选择器的步骤

用户可以按照以下步骤在NextJS中创建一个表情选择器。

收集表情数据

用户可以在诸如Emoji Cheat Sheet之类的网站上找到表情符号及其相应代码的列表。我们还可以使用一个表情库，例如emojilib，提供表情符号及其元数据的列表。将表情数据存储在NextJS项目中的变量或文件中。

创建UI组件

在我们的NextJS项目中，创建一个新的组件用于显示表情选择器。我们可以使用一个表情库，例如emoji-mart，在网格或列表中显示表情符号。

将表情数据传递给组件

将表情数据作为属性传递给组件并渲染表情符号。

添加事件处理程序

为组件添加一个事件处理程序，当用户选择一个表情符号时，更新状态。用户可以使用React中的setState方法来实现这个功能。

使用所选的表情符号

在您的应用程序中使用所选的表情符号。例如，您可以将所选的表情符号显示在状态中，或将其作为属性传递给另一个组件。

示例

此示例演示了如何使用一个表情符号数组创建一个表情选择器，而不使用任何库。

我们创建一个状态selectedEmoji来存储所选的表情符号，并创建一个函数setSelectedEmoji来更新所选的表情符号。

我们创建一个函数handleEmojiClick来处理表情符号的点击事件并更新所选的表情符号。

我们创建一个包含名称、Unicode和代码的表情符号数组。

我们渲染表情选择器，其中包括：

显示所选的表情符号。
渲染表情符号列表，其中每个表情符号由一个span元素表示，并具有一个onClick处理程序，调用handleEmojiClick函数并传递表情符号的Unicode。

生成的表情选择器将显示所选的表情符号和一个可以点击以选择表情符号的表情符号列表。

import React, { useState } from 'react';
import './EmojiPicker.css'

// Step 1: Create a state for the selected emoji
const EmojiPicker = () => {
   const [selectedEmoji, setSelectedEmoji] = useState(null);

   // Step 2: Create a function to handle the click of an emoji
   const handleEmojiClick = emoji => {
      setSelectedEmoji(emoji);
   };

   // Step 3: Create an array of emojis with their names, unicode, and codes
   const emojis = [
      { name: "smiling face with heart-eyes", unicode: "😍", code: ":heart_eyes:" },
      { name: "grinning face", unicode: "😀", code: ":grinning:" },
      { name: "winking face", unicode: "😉", code: ":wink:" },
      { name: "smiling face", unicode: "😊", code: ":smile:" },
      { name: "slightly smiling face", unicode: "🙂", code: ":slightly_smiling_face:" },
      { name: "kissing face", unicode: "😗", code: ":kissing_face:" }
   ];

   // Step 4: Render the emoji picker
   return (
      <div className="emoji-picker" id='emoji-picker'>
         {/* Step 4a: Display the selected emoji */}
            <div className="selected-emoji">
               {selectedEmoji}
            </div>
            {/* Step 4b: Render a list of emojis */}
            <div className="emoji-list"> 
               {Object.keys(emojis).map(emoji => (
               <span
                  key={emoji}
                  onClick={() =>
                  handleEmojiClick(emojis[emoji].unicode)}
                  className="emoji-item" >
                  {emojis[emoji].unicode}
               </span>
            ))}
         </div>
      </div>
   );
};

export default EmojiPicker;

EmojiPicker.css

.emoji-picker {
   display: flex;
   flex-direction: column;
   align-items: center;
   height:100vh;
}
.selected-emoji {
   font-size: 5rem;
}
.emoji-list {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   background-color: #f2f2f2;
   padding: 16px;
   font-size: 3rem;
   margin-top: 1rem;
}
.emoji-item {
   padding: 8px;
   cursor: pointer;
}

输出

如何在NextJS中创建表情选择器

示例

在下面的示例中，我们使用NextJS和emojilib库创建了一个表情选择器。

步骤1 - 首先，我们需要使用以下命令设置一个新的NextJS项目：

npx create-next-app

然后导航到项目目录。

步骤2 - 在页面目录中创建一个名为 EmojiPicker.js 的文件，并添加以下代码来导入 React 和 emojilib 库：

import React, { useState } from 'react'
import emojiData from 'emojilib'

步骤3 − 使用useState创建一个状态来跟踪所选表情符号 −

const [selectedEmoji, setSelectedEmoji] = useState(null)

步骤4 − 创建一个函数来处理当点击表情时的情况。这个函数更新选中的表情状态 −

const handleEmojiClick = emoji => {
   setSelectedEmoji(emoji)
}

步骤5 − 创建EmojiPicker组件，显示所选的表情符号和表情符号列表 −

import React, { useState } from 'react'
import emojiData from 'emojilib'
import './EmojiPicker.css' 
const EmojiPicker = () => {

   // State to keep track of the selected emoji
   const [selectedEmoji, setSelectedEmoji] = useState(null)

   // Function to handle when an emoji is clicked
   const handleEmojiClick = emoji => {
      setSelectedEmoji(emoji)
   }
   return (
      <div className="emoji-picker">
         {/* Display the selected emoji */}
         <div className="selected-emoji">
            {selectedEmoji}
         </div>
         {/* Display the list of emojis */}
         <div className="emoji-list">
            {Object.keys(emojiData).map(emoji => (
               <span
                  key={emoji}
                  onClick={() => handleEmojiClick(emoji)}
                  className="emoji-item"
               >
                  {emoji}
               </span>
            ))}
         </div>
      </div>
   )
}
export default EmojiPicker

步骤6 - 使用 CSS 文件为表情选择器添加样式。用户可以使用以下样式作为起点 –

.emoji-picker {
   display: flex;
   flex-direction: column;
   align-items: center;
}
.selected-emoji {
   font-size: 36px;
   font-family: sans-serif;
   background-color: #f2f2f2; 
   padding: 16px;
   border-radius: 50%;
   margin: 1rem 0;
}
.emoji-list {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   background-color: #f2f2f2;
   padding: 16px;
}
.emoji-item {
   font-size: 24px;
   font-family: sans-serif;
   padding: 8px;
   cursor: pointer;
}