# @comms-id/abr-abn-lookup-react 中文文档

规范地址：https://npmcn.com/package/%40comms-id/abr-abn-lookup-react/

版本：1\.0\.0
npm 元数据更新时间：2026-10-31T19:46:38.409Z
中文译文更新时间：2026-10-31T20:41:56.798Z
软件包许可：SEE LICENSE IN LICENSE

本文由上游 README 机器翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40comms-id/abr-abn-lookup-react
原文对照：https://npmcn.com/package/%40comms-id/abr-abn-lookup-react/?lang=original
项目主页：https://comms.id/
源码仓库：https://github.com/comms-id/platform

弃用说明：Removed\. Comms\.ID products are served live, nothing to install: https://cdn\.comms\.id/abr-abn-lookup/latest\.js

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：18.2 kB，9 个文件
- 模块格式：ES Module
- TypeScript 类型：包内自带
- 运行依赖：1 个
- peer 依赖：react \>=18
- 首次发布：2026-10-21T19:03:18.338Z
- 最新版本发布：2026-10-21T19:04:15.601Z
- 已发布版本数：2（近 12 个月 2 个）

## 中文简介

用于通信的React钩子和组件。ID ABN搜索：名称或ABN或ACN，可访问，无布局移位，具有数据属性

## 安装

```sh
npm install @comms-id/abr-abn-lookup-react
```

也可以使用：`pnpm add @comms-id/abr-abn-lookup-react`、`yarn add @comms-id/abr-abn-lookup-react`、`bun add @comms-id/abr-abn-lookup-react`

## README

# @comms-id / abn-react

一个React钩子和一个完成的Comms组件。ID ABN搜索。用户输入企业名称、ABN或ASIC号（ACN、ARBN）。易于访问，没有布局变化，始终显示数据属性。React 18或更高版本；这取决于 `@comms-id/abr-abn-lookup` 没有别的了。

```tsx
import { createAbrAbnLookupBrowserClient } from "@comms-id/abr-abn-lookup/browser";
import { AbnAutocomplete } from "@comms-id/abr-abn-lookup-react";

const client = createAbrAbnLookupBrowserClient({ relayUrl: "/api/comms-id/abr-abn-lookup" });

export const Supplier = () => (
  <AbnAutocomplete
    client={client}
    label="Business name or ABN"
    onSelect={(business) => console.log(business.name, business.formattedAbn, business.status)}
  />
);
```

`relayUrl` 您自己的服务器路由，设置与 `@comms-id/relay`您的服务器将调用签名为您注册的应用程序，因此浏览器不持有凭据。

## 这个领域是做什么的

-   **一个名字:** 用户暂停后，它会提示商家（姓名、银行号码、州和邮政编码）。选择一个查找并打电话 `onSelect`.
-   **ABN或ASIC号码（ACN， ARBN）：** 首先在浏览器中检查一个整数（9或11位数字，允许空格和连字符）。无效的数字不发送任何信息，并且字段说明了原因（“这不是一个有效的ABN：检查数字不匹配。”）。查找一个有效的数字。
-   **没有匹配不是中断。** “没有找到业务”和“业务搜索不可用”是不同的信息；故障提示“再试一次”。

`onSelect(business, timing)` 得到一个 `AbnBusiness` 无论哪个来源回答了这个查询： `abn`， `formattedAbn`， `asicNumber` 与 `asicNumberType` （`ACN`， `ARBN`， `ARSN` 或者 `undetermined`： ABR从不说明种类；v2, # 714), `name`， `status`， `entityType`， `gstRegistered`， `state`， `postcode`， `source` （`live` 或者 `snapshot`)， `asAt` 和 `attribution`.

## 您自己的标记： `useAbn`

```tsx
const abn = useAbn({ client, onSelect });
return (
  <>
    <input {...abn.getInputProps()} />
    <ul {...abn.getListboxProps("Matches")} hidden={!abn.state.open}>
      {abn.state.suggestions.map((s, i) => (
        <li key={`${s.abn}-${i}`} {...abn.getOptionProps(i)}>{describeSuggestion(s).primary}</li>
      ))}
    </ul>
    <p {...abn.getStatusProps()}>{abn.state.announcement}</p>
  </>
);
```

道具获取者携带WAI-ARIA组合框合约：角色， `aria-expanded`， `aria-controls`， `aria-activedescendant`，键处理（箭头，Enter, Escape, Tab）和一个礼貌的生活区域。当你使用钩子时，自己显示属性： `abn.state.attribution`.

## 组件

道具: `client` 和 `label` (需要), `onSelect`， `minChars` (3), `debounceMs` (400), `limit` (8), `prefer` （`{ state, postcode }`)， `idPrefix`， `name`， `placeholder`， `disabled`， `required`， `className`， `listLabel`， `showTiming` (真正的), `renderOption`.

使用自定义属性对其进行样式化 `--comms-id-text`， `--comms-id-surface`， `--comms-id-border`， `--comms-id-active`， `--comms-id-radius` 或者是 `comms-id-abr-abn-lookup__*` 类名。它不需要样式表。

-   列表在输入的下面浮动；打开它什么也不动。一个注释行有保留的高度并且不换行：结果是摘要（名称，ABN，状态，GST），而不是卡片，因此页面永远不会移动。使用 `onSelect` 我郑重声明。
-   它在服务器上以相同的结构呈现，并在StrictMode下工作。

## 数据属性

组件总是显示属性：回复所携带的属性，或者当回复没有属性时显示标准文本。不要隐藏它。

`LICENSE` 是消费者客户牌照。

## 常见问题

### @comms-id/abr-abn-lookup-react 是什么？

用于通信的React钩子和组件。ID ABN搜索：名称或ABN或ACN，可访问，无布局移位，具有数据属性注意：该包已被作者标记为弃用——Removed\. Comms\.ID products are served live, nothing to install: https://cdn\.comms\.id/abr-abn-lookup/latest\.js

### 如何安装 @comms-id/abr-abn-lookup-react？

在项目目录运行 npm install @comms-id/abr-abn-lookup-react，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：react（\>=18）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @comms-id/abr-abn-lookup-react 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @comms-id/abr-abn-lookup-react 支持 ESM 还是 CommonJS？

以 ES Module 形式发布，推荐使用 import 引入。在 CommonJS 项目中，Node\.js 20\.19\+ / 22\.12\+ 可以直接 require\(\) 不含顶层 await 的 ES Module，更早的版本需要改用动态 import\(\)。

### @comms-id/abr-abn-lookup-react 可以商用吗？

@comms-id/abr-abn-lookup-react 使用 SEE LICENSE IN LICENSE 许可。许可条款写在包内的独立文件中，请阅读该文件确认可否商用。以上为概括，不构成法律意见，请以许可原文为准。

### @comms-id/abr-abn-lookup-react 还在维护吗？

最新版本 1\.0\.0 发布于 2026/10/22（12 天前）；至今共发布 2 个版本，其中过去 12 个月发布了 2 个；首次发布于 2026/10/22。作者已将其标记为弃用，新项目建议寻找替代方案。