資料結構
網路
關係型資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究如何在 NextJS 中建立 Emoji Picker？
表情符號已成為現代通訊的重要組成部分。在本教程中，我們將學習如何在 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 傳遞給它。
生成的 emoji 選擇器將顯示選定的 emoji 和一個可以點選以選擇 emoji 的 emoji 列表。
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 和 emojilib 庫建立了一個表情符號選擇器。
步驟 1 - 首先，我們需要使用以下命令設定一個新的 NextJS 專案：
npx create-next-app
並導航到專案目錄。
步驟 2 - 在 pages 目錄中建立一個名為 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;
}
輸出
在本教程中，我們學習瞭如何使用 React 在 NextJS 中建立表情符號選擇器。我們收集了表情符號資料，建立了一個 UI 元件，將表情符號資料傳遞給元件，添加了一個事件處理程式，並在應用程式中使用了選定的表情符號。透過遵循這些步驟，使用者可以建立表情符號選擇器來增強其 NextJS 網站的使用者體驗。
2K+ 瀏覽量
