使用 @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',
    },