TagsBox小部件

🎥 在CodeSandbox现场观看

演示

描述

这是 TagsBox 实验室小部件 反应InstantSearch． 您可以使用这个小部件用Algolia搜索和选择标记，并在以后的任何目的中使用它们。

这个小部件显示一个输入，在用户输入时提供标记建议。然后可以单击标签以添加到输入中。

这有助于用户选择记录用于其他目的，而不是搜索它们，而是重用它们以完成以后的其他操作（例如，在创建博客文章时选择发送电子邮件的联系人或类别）。

目录表

• 获取代码
  • JavaScript
  • CSS
• 用法
  • 需求
• API
  • relevanceWidget(选择)
• 例子
• 实现细节
• 贡献

获取代码

这个小部件自带JavaScript，但也有预定义的CSS。

JavaScript

您可以从存储库本身复制并粘贴JavaScript代码，在 src / lib 文件夹，并使用 <Tag /> 组件。

CSS

您可以从存储库本身复制并粘贴必要的CSS代码，将其抓取进来 src / lib / Tags.css。

用法

最简单的用法是：

import { InstantSearch } from 'react-instantsearch-dom';
import TagsBox from 'instansearch-tagsbox-react';

export const SelectedTagComponent = ({ hit }) => (
    <Fragment>
        {hit.lastname}
    </Fragment>
);

export const SuggestedTagComponent = ({ hit }) => (
    <Fragment>
        {hit.firstname} {hit.lastname}
    </Fragment>
);

<InstantSearch
    appId="..."
    apiKey="..."
    indexName="..."
>
    <TagsBox
        selectedTagComponent={SelectedTagComponent}
        suggestedTagComponent={SuggestedTagComponent}
        onUpdate={(newTags, previousTags) => console.log(newTags, previousTags)}
        translations={{ placeholder: "Search…", noResult: "…" }}
    />
</InstantSearch>

需求

您应该封装 <TagsBox /> 组件 <InstantSearch /> 一个。

要正常工作， 您需要为组件提供三个props：

• selectedTagComponent （component）：描述一个选定的标签应该如何显示
  • 收到一个 hit 作为参数（来自阿尔及利亚）
• suggestedTagComponent （组件）：描述建议的标签应该如何显示
  • 收到一个 hit 作为参数（来自阿尔及利亚）
• onUpdate （函数）：每次添加或删除标签时调用
  • 接收代表新标记和前一个标记的两个参数。它们都是数组，分别包含当前选择的标记和以前的标记

可以封装 <TagBox /> 组件 <Index /> 如果您希望针对来自同一InstantSearch实例的不同索引，请使用。

例子

• 使用 connectAutoComplete() 连接器: CodeSandbox

道具

实现细节

控件实现此小部件 connectAutoComplete() 连接器． 要了解有关连接器的更多信息，可以阅读相关的 指南。

贡献

要对项目做出贡献，请克隆此存储库，然后运行：

yarn
yarn start