使用 @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

这篇好文章是转载于：学新通技术网