使用 @mention 功能构建 React 评论表单
@mention在引入功能之前,对线程和消息的评论曾经非常混乱。尽管您可以在线程中发送消息,但通常无法知道该消息是针对谁的,并且无法吸引那些尚未参与对话的人。
通过 的介绍@mention,您可以提及朋友(或善意的社交媒体专家)并邀请他们加入讨论。
您还可以@mention在 Facebook、Dropbox、WhatsApp 和 Gmail 等各种应用程序中找到具有功能的表单。
本文将着眼于构建一个具有@mentionReact 中包含的功能的表单。我们将专门使用该react-mentions软件包。
您可以在我的 Github 存储库中找到本教程的完整代码。让我们开始吧!
-
建立一个评论表单react-mentions
-
使用MentionsInput和Mention组件
-
样式react-mentions组件
-
探索其他功能react-mentions
-
singleLine输入
-
多种触发模式
-
修改显示id
-
可滚动的文本区域
-
从外部来源获取响应
-
获取表情符号
-
-
创建具有@mention功能的自定义表单
建立一个评论表单react-mentions
让我们首先使用以下命令创建一个新的 React 应用程序:
npx create-react-app react-mentions
如果您使用的是 Yarn,请运行以下命令:
yarn create react-app react-mentions
我将在本教程的其余部分使用 Yarn。
接下来,安装react-mentions包如下:
yarn add react-mentions
该react-mentions包导出两个 React 组件用于渲染提及:MentionsInput组件和Mention组件。MentionsInput是用于渲染文本区域控件的主要组件,可以将一个或多个Mention组件作为子组件。
该Mention组件表示一类可提及对象的数据源,包括用户、问题等。
使用MentionsInput和Mention组件
让我们react-mentions在我们的应用程序中实现。转到App.js文件并用下面的代码块替换整个代码:
import { Mention, MentionsInput } from "react-mentions";
function App() {
return (
<div>
<h2>Let's get started</h2>
<MentionsInput>
<Mention />
</MentionsInput>
</div>
);
}
export default App;
当我们用 启动开发服务器时yarn start,我们应该得到一个如下图所示的输入框:
接下来,我们将创建一个提供给Mention组件的虚拟数据数组。数据必须具有id和display作为特定键。
我们还需要创建一个状态事件。这将用于将我们的应用程序的状态绑定到来自数据的值,然后将其传递给MentionsInput组件。
将以下代码复制并粘贴到App.js文件中:
function App() {
const [value, setValue] = useState("");
const users = [
{
id: "isaac",
display: "Isaac Newton",
},
{
id: "sam",
display: "Sam Victor",
},
{
id: "emma",
display: "emmanuel@nobody.com",
},
];
...
}
我们根据上面的代码块创建了一个状态变量和用户数组。用户数组包含带有id和display参数的对象。react-mentions这些是填充组件所需的参数。
现在,让我们return()用下面的代码更新语句:
return (
<div className="App">
<MentionsInput
value={value}
onChange={(e) => setValue(e.target.value)}>
<Mention
data={users} />
</MentionsInput>
</div>
);
我们正在使用接受道具的MentionsInput标签。value然后我们使用onChange道具设置状态值。完成所有这些后,我们应该能够实现这一点:
样式react-mentions组件
看看我们上面的进度,你可能会注意到我们的组件看起来有点不合适。我们可以通过自定义样式来修复它。
在文件夹中创建一个mentionStyles.js文件src并粘贴以下代码:
export default {
backgroundColor: "#cee4e5",
};
在文件夹中创建一个mentionsInputStyles.js文件src并将下面的代码块粘贴到其中:
export default {
control: {
backgroundColor: '#fff',
fontSize: 16,
// fontWeight: 'normal',
},
'&multiLine': {
control: {
fontFamily: 'monospace',
minHeight: 63,
},
highlighter: {
padding: 9,
border: '1px solid transparent',
},
input: {
padding: 9,
border: '1px solid silver',
},
},
'&singleLine': {
display: 'inline-block',
width: 180,
highlighter: {
padding: 1,
border: '2px inset transparent',
},
input: {
padding: 1,
border: '2px inset',
},
},
suggestions: {
list: {
backgroundColor: 'white',
border: '1px solid rgba(0,0,0,0.15)',
fontSize: 16,
},
item: {
padding: '5px 15px',
borderBottom: '1px solid rgba(0,0,0,0.15)',
'&focused': {
backgroundColor: '#cee4e5',
},
},
},
}
返回App.js并导入样式:
import mentionStyle from "./mentionStyle";
import mentionsInputStyle from "./mentionsInputStyle";
现在,更新组件:
<div className="App">
<MentionsInput
style={mentionsInputStyle}
value={value}
onChange={(e) => setValue(e.target.value)}>
<Mention
style={mentionStyle}
data={users}
/>
</MentionsInput>
</div>
我们通过添加 style 属性并将其设置为导入的样式来更新我们的组件。
到目前为止,随着我们的进步,我们已经Mention在我们的应用程序中实现了一个很好的定制功能!
超过 20 万开发人员使用 LogRocket 来创造更好的数字体验了解更多 →
探索其他功能react-mentions
该react-mentions软件包带有许多可定制的功能,所以让我们来看看其中的一些!
singleLine输入
singleLine当我们希望我们的输入是单行文本而不是默认文本区域时,会调用 input。您可以在下面的代码中看到这一点:
return (
<div className="App">
...
<h2>Using a Single line Input</h2>
<MentionsInput
singleLine //this sets the single line input to true
style={mentionsInputStyle}
value={value}
onChange={(e) => setValue(e.target.value)}
>
</div>
);
多种触发模式
我们还可以决定使用多个触发模式而不是默认@触发模式。幸运的是,该react-mention软件包支持这一点。
让我们启动第二个触发模式。在文件中导入useCallback钩子。App.js该useCallback钩子用于阻止Mention组件在不需要的情况下重新渲染:
import { useState, useCallback } from "react";
接下来,创建一个电子邮件验证正则表达式。这将作为一个额外的触发器来检测输入是否是电子邮件。然后它将突出显示它作为提及。
function App() {
const [value, setValue] = useState("");
const emailRegex = /(([^\s@] @[^\s@] \.[^\s@] ))$/;
...
return (
<div className="App">
<h2>Using Multiple trigger patterns</h2>
<MentionsInput
style={mentionsInputStyle}
value={value}
onChange={(e) => setValue(e.target.value)}
>
<Mention style={mentionStyle} data={users} />
<Mention
trigger={emailRegex}
data={(search) => [{ id: search, display: search }]}
onAdd={useCallback((...args) => {
console.log(...args);
}, [])}
style={{ backgroundColor: "#d1c4e9" }}
/>
</MentionsInput>
</div>
);
修改显示id
该react-mentions库还允许我们将默认显示更改id为我们喜欢的显示。我们可以通过使用displayTransform参数来实现这一点。
<h2>Displaying ID</h2>
<MentionsInput
style={mentionsInputStyle}
value={value}
onChange={(e) => setValue(e.target.value)}
>
<Mention
displayTransform={(id) => `<!--${id}-->`}
style={mentionStyle}
data={users}
/>
</MentionsInput>
在上面的代码块中,我们id从用户对象返回并渲染它。
可滚动的文本区域
文本区域是响应式输入字段,可根据多个用户输入调整高度。此功能可能会导致 UI 失真并适用于我们的react-mentions组件。我们将让我们的文本区域可滚动以避免这种扭曲,并创建一个更好的 UI。
首先,我们将merge函数从lodash库中导入到App.js文件中:
import merge from 'lodash/merge';
该merge函数将负责将我们mentionsInputStyle的样式与我们的新自定义样式合并。
来自 LogRocket 的更多精彩文章:
-
不要错过来自 LogRocket 的精选时事通讯The Replay
-
了解LogRocket 的 Galileo 如何消除噪音以主动解决应用程序中的问题
-
使用 React 的 useEffect优化应用程序的性能
-
在多个 Node 版本之间切换
-
了解如何使用 AnimXYZ 为您的 React 应用程序制作动画
-
探索 Tauri,一个用于构建二进制文件的新框架
-
比较NestJS 与 Express.js
function App() {
let customStyle = merge({}, mentionsInputStyle, {
input: {
height: 80,
overflow: "auto",
},
highlighter: {
height: 80,
overflow: "hidden",
boxSizing: "border-box",
},
});
...
return (
<MentionsInput
value={value}
onChange={(e) => setValue(e.target.value)}
style={customStyle}
placeholder={"Mention people using '@'"}
a11ySuggestionsListLabel={"Suggested mentions"}
>
<Mention
trigger="@"
data={users}
style={mentionStyle}
/>
);
}
在上面的代码块中,我们将 合并mentionsInputStyle到我们新更新的样式中。我们还将文本区域的高度和宽度设置为固定值并自动设置溢出。
完成后,我们将拥有一个更好的带有可滚动组件的 UI,如下所示:
从外部来源获取响应
在本节中,我们将了解如何在表单中使用来自 API 的数据。在许多情况下,我们的数据可能来自外部来源。让我们看看我们如何处理我们的响应并将它们添加到react-mentionsdata 属性中。
我们将为此演示使用JSON 占位符 API并从中获取用户。将下面的代码块复制并粘贴到App.js文件中:
function fetchUsers(query, callback) {
if (!query) return;
fetch(`https://jsonplaceholder.typicode.com/users?q=${query}`, {
json: true,
})
.then((res) => res.json())
// Transform the users to what react-mentions expects
.then((res) =>
res.map((user) => ({ display: user.username, id: user.name }))
)
.then(callback);
}
根据上面的代码块,我们正在对jsonplaceholder服务器进行 API 调用。我们将两个参数传递给fetch函数:query和callback。
该query参数保存来自 的输入mentionInput,而callback当我们准备好响应时调用该参数。
接下来,我们返回一个用户列表,循环遍历它,并将用户名和用户名作为 and 的对象display返回id。
最后,我们在MentionsInput组件的 data 属性中调用我们的函数并显示id:
<MentionsInput
value={value}
onChange={(e) => setValue(e.target.value)}
style={mentionsInputStyle}
placeholder="Mention any JsonPlaceholder username by typing `@` followed by at least one character"
a11ySuggestionsListLabel={"Suggested JsonPlaceholder username for mention"}
>
<Mention
displayTransform={(id) => `@${id}`}
trigger="@"
data={fetchUsers}
style={mentionStyle}
/>
</MentionsInput>
获取表情符号
有了这个react-mentions包,不仅可以引用和提及名字,还可以提及表情符号!
让我们看看如何从外部 API 获取表情符号,并在搜索时将它们显示在输入字段中。
function App() {
const [emojiValue, setEmojiValue] = useState([]);
const notMatchingRegex = /($a)/;
useEffect(() => {
fetch(
"https://gist.githubusercontent.com/oliveratgithub/0bf11a9aff0d6da7b46f1490f86a71eb/raw/d8e4b78cfe66862cf3809443c1dba017f37b61db/emojis.json"
)
.then((data) => {
return data.json();
})
.then((jsonData) => {
setEmojiValue(jsonData.emojis);
});
}, []);
const queryEmojis = (query, callback) => {
if (query.length === 0) return;
const filterValue = emojiValue
.filter((emoji) => {
return emoji.name.indexOf(query.toLowerCase()) > -1;
})
.slice(0, 10);
return filterValue.map(({ emoji }) => ({ id: emoji }));
};
...
return (
<h3>Emoji support</h3>
<MentionsInput
value={value}
onChange={(e) => setValue(e.target.value)}
style={mentionsInputStyle}
placeholder={"Press '&' for emojis, mention people using '@'"}
>
<Mention
trigger="@"
displayTransform={(username) => `@${username}`}
markup="@__id__"
data={users}
regex={/@(\S )/}
style={mentionStyle}
appendSpaceOnAdd
/>
<Mention
trigger="&"
markup="__id__"
regex={notMatchingRegex}
data={queryEmojis}
/>
</MentionsInput>
);
}
emojiValue根据上面的代码块,我们会在页面加载后立即从我们的 API 中获取并存储表情符号。我们使用useEffect钩子执行此操作,并在用户搜索特定关键字时显示表情符号。
在这里,我们使用双触发模式,使用&emojis 符号和@users 数组符号。notMatchingRegex用作不匹配表情符号的过滤器。
创建具有@mention功能的自定义表单
在本节中,我们将把我们所了解的关于react-mentions库的所有内容放在一起来构建一个评论表单。
首先,在目录中创建一个CustomForm.jsx文件src并粘贴以下代码:
// CustomForm.jsx
import { useState } from 'react';
import { Mention, MentionsInput } from 'react-mentions';
import styles from './FormInputStyle.module.css';
import mentionsInputStyle from './mentionsInputStyle';
import mentionStyle from './mentionStyle';
const CustomForm = () => {
const [formState, setFormState] = useState({
username: '',
comment: '',
});
const [comments, setComments] = useState([]);
const users = [
{
id: 'isaac',
display: 'Isaac Newton',
},
{
id: 'sam',
display: 'Sam Victor',
},
{
id: 'emma',
display: 'emmanuel@nobody.com',
},
];
const submit = () => {
if (formState.username === '' || formState.comment === '') {
alert('Please fill in all fields');
return;
}
setComments((comments) => [
...comments,
{
username: formState.username,
comment: formState.comment,
},
]);
setFormState({
username: '',
comment: '',
});
};
const current = new Date();
const date = `${current.getDate()}/${
current.getMonth() 1
}/${current.getFullYear()}`;
在上面的代码中,我们导入了我们将要使用的包react-mentions以及useState用于处理表单的注释和状态的钩子。
表单和评论状态也已设置并为应用程序提供虚拟数据。影音壳子App,TVbox最新魔改版双播神器,内置80 数据源接口覆盖全网!我们的submit函数检查字段是否已填写并设置评论状态。我们现在有一个date获取评论日期的变量。
现在,使用以下代码更新返回值:
return (
<div className={styles.form}>
<section className={styles.formCard}>
<h2 className={styles.formTitle}>Comment Form</h2>
<input
type="text"
value={formState.username}
onChange={(e) =>
setFormState({ ...formState, username: e.target.value })
}
placeholder="Input Your Name"
/>
<MentionsInput
placeholder="Add Comment. Use '@' for mention"
value={formState.comment}
onChange={(e) =>
setFormState({ ...formState, comment: e.target.value })
}
style={mentionsInputStyle}
>
<Mention style={mentionStyle} data={users} />
</MentionsInput>
<button onClick={submit}>Submit</button>
</section>
{comments.length === 0 ? (
null
) : (
<section>
{comments.map((comment, i) => (
<div className={styles.commentCard} key={i}>
<p className={styles.username}>
{comment.username} on {date}
</p>
<h2>{comment.comment}</h2>
</div>
))}
</section>
)}
</div>
);
};
export default CustomForm;
我们将适当的道具传递给Mention和MentionInput组件,并在表单下方显示评论(如果有的话)。
伟大的!接下来,创建一个FormInputStyle.module.cssfor 样式并将以下代码粘贴到其中:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.form {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 100%;
height: 100vh;
background-color: #ffa5a5;
}
.formTitle {
font-size: 2rem;
color: red;
margin-bottom: 1rem;
}
input {
height: 3rem;
width: 25rem;
margin-bottom: 1rem;
padding: 1rem;
font-size: 18px;
border: 1px solid silver;
}
.formCard {
width: 27rem;
display: flex;
flex-direction: column;
background-color: rgb(54, 44, 24);
padding: 1rem;
}
button {
border: none;
border-radius: 3px;
color: white;
background-color: green;
font-size: 1.2rem;
padding: 10px;
margin-top: 1rem;
}
.commentCard {
margin: 1.5rem;
color: rgb(173, 173, 173);
font-size: 1rem;
background-color: #444;
padding: 1rem;
width: 27rem;
}
.username {
color: white;
font-size: 1.3rem;
}
这样,我们就完成了表单的创建!您应该看到如下内容:
结论
在本文中,我们了解了react-mentions一个易于使用的库,用于构建具有@mention功能的表单。我们还研究了react-mentions包的不同功能以及我们如何使用它们。我们还使用该包构建了一个具有@mention功能的评论表单。react-mentiom
这篇好文章是转载于:学新通技术网
- 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
- 本站站名: 学新通技术网
- 本文地址: /boutique/detail/tanhgikajj
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
Android 11 保存文件到外部存储,并分享文件
Luke 10-12 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
微信公众号没有声音提示怎么办
PHP中文网 03-31 -
excel下划线不显示怎么办
PHP中文网 06-23 -
excel打印预览压线压字怎么办
PHP中文网 06-22 -
TikTok加速器哪个好免费的TK加速器推荐
TK小达人 10-01 -
怎样阻止微信小程序自动打开
PHP中文网 06-13