# @bigbinary/neeto-fields-frontend 中文文档

规范地址：https://npmcn.com/package/%40bigbinary/neeto-fields-frontend/

版本：4\.3\.2
npm 元数据更新时间：2026-10-31T21:13:52.413Z
中文译文更新时间：2026-11-08T02:10:36.838Z
软件包许可：UNLICENSED

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

原始 npm 页面：https://www.npmjs.com/package/%40bigbinary/neeto-fields-frontend
原文对照：https://npmcn.com/package/%40bigbinary/neeto-fields-frontend/?lang=original
项目主页：https://github.com/bigbinary/neeto-fields-nano

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

- 包体积（解压后）：2 MB，203 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- Node.js 要求：\>=22\.13
- 运行依赖：2 个
- peer 依赖：qs 6\.16\.2，url 0\.11\.4，yup 0\.32\.11，antd 5\.22\.1，util ^0\.12\.5，axios 1\.20\.0，dayjs 1\.11\.10，ramda 0\.29\.0，react 18\.3\.1，buffer ^6\.0\.3，formik 2\.4\.6，i18next 22\.5\.1，zustand 4\.4\.2，dompurify 3\.4\.17，js-logger 1\.6\.1，react-dom 18\.3\.1，classnames 2\.5\.1，stream-http 3\.2\.0，tailwindcss ^4\.1\.17，lucide-react 0\.577\.0，react-helmet ^6\.1\.0，@dnd-kit/core 6\.3\.1，os-browserify 0\.3\.0，react-i18next 12\.3\.1，vm-browserify 1\.1\.2，@babel/runtime 7\.29\.7，react-toastify 8\.0\.2，tty-browserify 0\.0\.1，path-browserify ^1\.0\.1，https-browserify 1\.0\.0，mixpanel-browser ^2\.45\.0，react-router-dom 5\.3\.3，@dnd-kit/sortable 10\.0\.0，crypto-browserify 3\.12\.1，source-map-loader 4\.0\.1，stream-browserify ^3\.0\.0，@bigbinary/neetoui 8\.8\.3，@honeybadger-io/js 6\.10\.1，@bigbinary/neeto-cist 1\.0\.17，@honeybadger-io/react 6\.1\.25，@tanstack/react-query 5\.59\.20，@bigbinary/neeto-atoms 1\.1\.2，@bigbinary/neeto-icons 1\.20\.89，@bigbinary/neeto-molecules 5\.9\.13，@tailwindcss/container-queries ^0\.1\.1，@tanstack/react-query-devtools 5\.59\.20，@bigbinary/neeto-commons-frontend 4\.14\.8，@bigbinary/neeto-filters-frontend 4\.6\.2
- 首次发布：2023-07-14T05:02:32.637Z
- 最新版本发布：2026-10-31T21:13:52.241Z
- 近 30 天下载量：11163（2026-10-08 至 2026-11-06，npm 官方下载统计）
- 已发布版本数：159（近 12 个月 49 个）

## 中文简介

一个回波作为新纳米结构,配置,数据等的真理来源.

## 安装

```sh
npm install @bigbinary/neeto-fields-frontend
```

也可以使用：`pnpm add @bigbinary/neeto-fields-frontend`、`yarn add @bigbinary/neeto-fields-frontend`、`bun add @bigbinary/neeto-fields-frontend`

## README

# 需要去野外,没有

这个 `neeto-fields-nano` 能够管理动态添加的字段 (常被称作自定义字段)横跨neto应用程序. 纳米出口 页:1 `@bigbinary/neeto-fields-frontend` 国家防范机制一揽子计划 `neeto-fields-engine` 铁路发展引擎.

# 目录

1.  [用主机应用程序开发](https://npmcn.com/package/%40bigbinary/neeto-fields-frontend/#readme-development-with-host-application)
    -   [发动机](https://npmcn.com/package/%40bigbinary/neeto-fields-frontend/#readme-engine)
        -   [安装](https://npmcn.com/package/%40bigbinary/neeto-fields-frontend/#readme-installation)
        -   [可自定义](https://npmcn.com/package/%40bigbinary/neeto-fields-frontend/#readme-customizability)
    -   [前端软件包](https://npmcn.com/package/%40bigbinary/neeto-fields-frontend/#readme-frontend-package)
        -   [安装](https://npmcn.com/package/%40bigbinary/neeto-fields-frontend/#readme-installation-1)
        -   [发展指示](https://npmcn.com/package/%40bigbinary/neeto-fields-frontend/#readme-instructions-for-development)
        -   [构成部分](https://npmcn.com/package/%40bigbinary/neeto-fields-frontend/#readme-components)
            -   [田径台](https://npmcn.com/package/%40bigbinary/neeto-fields-frontend/#readme-1-fieldsdashboard)
            -   [字段盘](https://npmcn.com/package/%40bigbinary/neeto-fields-frontend/#readme-2-fieldspane)
            -   [字段值控制器](https://npmcn.com/package/%40bigbinary/neeto-fields-frontend/#readme-3-fieldvaluescontainer)
            -   [外地输入](https://npmcn.com/package/%40bigbinary/neeto-fields-frontend/#readme-4-fieldinputs)
            -   [内置字段值输入](https://npmcn.com/package/%40bigbinary/neeto-fields-frontend/#readme-5-inlinefieldvalueinput)
            -   [字段删除提醒](https://npmcn.com/package/%40bigbinary/neeto-fields-frontend/#readme-6-fielddeletealert)
        -   [职能](https://npmcn.com/package/%40bigbinary/neeto-fields-frontend/#readme-functions)
            -   [合并初始值](https://npmcn.com/package/%40bigbinary/neeto-fields-frontend/#readme-1-neetofieldsutilsmergeinitialvalues)
            -   [变换值](https://npmcn.com/package/%40bigbinary/neeto-fields-frontend/#readme-2-neetofieldsutilstransformvalues)
        -   [钩子](https://npmcn.com/package/%40bigbinary/neeto-fields-frontend/#readme-hooks)
            -   [使用奇异字段](https://npmcn.com/package/%40bigbinary/neeto-fields-frontend/#readme-1-usefetchfields)
            -   [使用显示字段](https://npmcn.com/package/%40bigbinary/neeto-fields-frontend/#readme-2-useshowfield)
            -   [创建字段](https://npmcn.com/package/%40bigbinary/neeto-fields-frontend/#readme-3-usecreatefield)
            -   [使用更新字段](https://npmcn.com/package/%40bigbinary/neeto-fields-frontend/#readme-4-useupdatefield)
            -   [销毁字段](https://npmcn.com/package/%40bigbinary/neeto-fields-frontend/#readme-5-usedestroyfield)
2.  [出版指令](https://npmcn.com/package/%40bigbinary/neeto-fields-frontend/#readme-instructions-for-publishing)

## 用主机应用程序开发

### 发动机

该引擎用于管理横跨neto产品的任何实体的字段.

#### 安装

1.  将此行添加到您的应用程序的 Gemfile 中 :
    
    ```ruby
    source "NEETO_GEM_SERVER_URL" do
    # ..existing gems
    
      gem 'neeto-fields-engine'
    end
    ```
    
2.  然后执行:
    
    ```ruby
    bundle install
    ```
    
3.  将此行添加到您的应用程序 `config/routes.rb` 文件 :
    
    ```ruby
    mount NeetoFieldsEngine::Engine, at: "/neeto_fields"
    ```
    
4.  运行以下命令以复制从引擎到主机的迁移 应用程序 :
    
    ```ruby
    rails g neeto_fields_engine:install
    ```
    
5.  添加迁移到数据库 :
    
    ```ruby
    bundle exec rails db:migrate
    ```
    
6.  使用下列方法在模型之间产生所需的关联 命令 :
    
    ```ruby
    rails g neeto_fields_engine:associations
    ```
    
    这将促使用户输入两件事:
    
    1.  车主的名字.
    2.  资源模型名称.
    
    探索 [拥有者信息( R)](https://npmcn.com/package/%40bigbinary/neeto-fields-frontend/docs/engine/owner-resource-information.md) 页:1 细节.
    
7.  向您添加所需的权限 `permissions.yml` 文件 :
    
    -   `neeto_fields_engine.view_fields` - 允许查看字段
    -   `neeto_fields_engine.manage_fields` - 允许创建、更新、删除, 和重排字段
    -   `neeto_fields_engine.view_field_values` - 允许查看字段值
    -   `neeto_fields_engine.manage_field_values` - 允许创建、更新和 删除字段值

#### 支持的权限

该引擎通过下列方式提供颗粒许可控制 权限 :

-   **`neeto_fields_engine.view_fields`** - 允许用户查看字段
-   **`neeto_fields_engine.manage_fields`** - 允许用户创建,更新, 删除并重排字段
-   **`neeto_fields_engine.view_field_values`** - 允许用户查看字段 数值
-   **`neeto_fields_engine.manage_field_values`** - 允许用户创建, 更新并删除字段值

#### 策略召回

该引擎通过该引擎暴露出以下政策方法: `FieldPolicy` 类 :

-   `can_view_fields?` - 检查用户能否查看字段
-   `can_manage_fields?` - 检查用户是否能够管理字段
-   `can_view_field_values?` - 检查用户能否查看字段值
-   `can_manage_field_values?` - 检查用户能否管理字段值

这些方法被控制器的授权回调自动使用 并在需要时可在主机应用程序中被推翻.

#### 自定义

参考 [引擎自定义](https://npmcn.com/package/%40bigbinary/neeto-fields-frontend/docs/engine/customizability.md) 学习 定制引擎的默认行为 .

### 前端软件包

#### 安装

安装最新的 `neetoFields nano` 使用下列命令的软件包:

```shell
yarn add @bigbinary/neeto-fields-frontend
```

#### 依赖性

`neeto-fields-nano` 拥有对等的依赖性,需要使用纳米 适当的。 使用以下命令安装对等依赖 :

```shell
yarn add uuid
```

### 发展指示

检查 [前端软件包开发指南](https://neeto-engineering.neetokb.com/p/a-d34cb4b0) 用于开发前端软件包的分步指令.

### 构成部分

#### 1\. 联合国. `FieldsDashboard`

![Dashboard image](https://i.ibb.co/8NYn403/Screenshot-2023-07-13-20-04-54.png)

  

这个 `FieldsDashboard` 构成部分充当管理所有项目的仪表板 与自定义外地有关的业务。 它的运作不需要任何道具 默认,但您可以通过通过可选道具来自定义其行为.

#### 道具

1.  `rowData`: 代表仪表板内表格的行数据.
    
2.  `buildColumnData` : 构建列数据的函数( 在 netoUI 表格中) 表格。 此函数获得 `onDeleteClick`, (中文(简体) ), `onEditClick` 回调和 `defaultColumns` 作为论据.
    
3.  `showOwnersInMenu`: 接受布尔值。 设定为 `true`,田园 以分类格式(侧菜单)显示。 默认, 字段根据资源类型进行分类.
    
4.  `resourceType`: 明确规定 `resource_type` 区域 在仪表板表中显示。 此道具预计当 `showOwnersInMenu` 设置为 `true`。 。 。 .
    
5.  `allowedKinds`:指定允许创建的字段类型列表.
    
6.  `paneProps`: 道具将传递到添加/编辑面板上。 它接受 随后.
    
    -   `children`: 将在窗帘内制造的儿童部件.
    -   `validations`: 表格输入字段在 `children`。 。 。 . `validations` 必须是带有字段名的对象 作为键和相应的yup验证方案作为值.
    -   `initialValues`: formik 输入字段的初始值 `children`。它作为对象提供,字段名称作为密钥 相应的数值.
    -   `hideRequiredSwitch`: 设置为布尔值时 `true` 隐藏切换 切换为 `isRequried`。 。 。 .
    -   `onMutationSuccess`: 在成功时触发的召回函数 突变函数(创建,更新和删除).
    -   `lookupOptions`: 指定可供查找的资源类型 `lookup` 字段.
    -   `allowSelectingAccessType`:布尔值(默认) `false`) (中文(简体) ). 设定为 `true`,允许选择字段访问类型(`everyone` 或者说 `restricted`(中文(简体) ) 将外地能见度限制在具体组织的作用.
7.  `showStateFilter`: 指定是显示还是隐藏的布尔值 状态过滤器.
    
8.  `fieldStatesTaxonomy`: 指定要为 `active` 财务报告和审定财务报表 `inactive` 各州.
    
9.  `breadcrumbs`: 指定要在仪表盘上显示的面包屑 页 次.
    
10.  `helpDescription`: 要设置弹出式描述, 这可以是 字符串或自定义组件.
     
11.  `helpDocUrl`: 指定关于字段的帮助文档的URL。 这个 URL将在 `NoData` 屏幕.
     
12.  `nameAliases`: 此属性接受别名作为密钥值对 在标题和菜单栏中显示资源类型的名称.
     
13.  `headerTitle`: 明确指定标题。 默认为"fields" 。 这个 并具体说明标题 `HelpPopover`。 。 。 .
     
14.  `resources`:对于基于所有者的字段分类,提供一系列 对象为 `id` 财务报告和审定财务报表 `name` 每个所有者都有属性。 资源 基于类型分类,使用对象数组 `label` 财务报告和审定财务报表 `value` 属性代表每个资源类型.
     
15.  `headerSize`: 明确指定页眉大小。 默认为"小" .
     
16.  `canManageFields`: 高于默认权限的布尔值 检查管理字段。 未提供时,构成部分核对 `neeto_fields_engine.manage_fields` 全球道具允许.
     
17.  `onDeleteSuccess`: 在成功时触发的召回函数 字段删除.
     
18.  `onReorderSuccess`: 在成功时触发的召回函数 田地重排顺序.
     
     > 如未提供资源,按资源类型分类 菜单栏将获取所有资源类型。 对于基于所有者的分类,它 将获取并列出组织内的所有所有者.
     

#### 使用量

1.  何时 `Organization` 是田园的主人.
    
    ```jsx
    import { FieldsDashboard } from "@bigbinary/neeto-fields-frontend";
    
    <FieldsDashboard
      allowedKinds={["text", "number", "lookup"]}
      buildColumnData={({ defaultColumns }) => [
        ...defaultColumns,
        {
          dataIndex: "isSystem",
          index: "isSystem",
          title: t("titles.systemField"),
          render: boolVal => (boolVal ? "Yes" : "No"),
        },
      ]}
      fieldStatesTaxonomy={{ active: "Active", inactive: "Deactivated" }}
      paneProps={{
        children: <HostSpecificInputFields />,
        validations: {
          hostSpecificInputName: validationSchema,
        },
        initialValues: {
          hostSpecificInputName: initialValue,
        },
         lookupOptions: [
         { label: "Contact", value: "contact" },
         { label: "Company", value: "company" },
         ],
      }}
      breadcrumbs={[
        {
          link: "/",
          text: "Home",
        },
        {
          link: "/",
          text: "Settings",
        },
      ]}
    />;
    ```
    
    #### 使用情况 [必须去德士克](https://github.com/bigbinary/neeto-desk-web/blob/34068bb579335d3eb6041279f6f3f660099d7f1c/app/javascript/src/components/TicketFields/List/index.jsx#L119C8-L130C11)
    
2.  何时 `Organization` 不是田园的主人。 假设老板是 `Project`。 。 。 .
    
    ```jsx
    import { FieldsDashboard } from "@bigbinary/neeto-fields-frontend";
    
    <FieldsDashboard
      allowedKinds={["text", "number", "lookup"]}
      resourceType="tasks"
      showOwnersInMenu
      fieldStatesTaxonomy={{ active: "Active", inactive: "Deactivated" }}
      paneProps={{
        children: <HostSpecificInputFields />,
        validations: {
          hostSpecificInputName: validationSchema,
        },
        initialValues: {
          hostSpecificInputName: initialValue,
        },
        lookupOptions: [
         { label: "Contact", value: "contact" },
         { label: "Company", value: "company" },
         ],
      }}
      breadcrumbs={[
        {
          link: "/",
          text: "Home",
        },
        {
          link: "/",
          text: "Settings",
        },
      ]}
    />;
    ```
    
    #### 使用情况 [需要论坛](https://github.com/bigbinary/neeto-form-web/blob/1ae06a0f49f62b20ced313c1672fb336553b867c/app/javascript/src/components/Form/Settings/Fields.jsx#L35C7-L47C9)
    

#### 2\. 联合国. `FieldsPane`

![AddField component gif](https://s11.gifyu.com/images/SWngt.gif)

  

这个 `FieldsPane` 组件处理 `Add / Edit` 外地业务.

#### 道具

1.  `isOpen`: 指定窗格打开/关闭状态的布尔状态.
2.  `onClose`: 关闭窗格时要执行的函数.
3.  `resourceType`:指定要通过 窗关上.
4.  `allowedKinds`: 指定允许创建的字段类型列表.
5.  `children`: 窗帘的儿童部分.
6.  `additionalValidations`: Formik 字段的验证 `children`。 。 。 .
7.  `initialValues`: Formik 字段的初始值 `children`。 。 。 .
8.  `selectedField`: 编辑涉及的字段对象. 如果这样 道具被给出,相板将起到编辑相板的作用. 换作是添加相片.
9.  `hideRequiredSwitch`: 指定是否隐藏 `Is required` 切换切换 在平板电脑上.
10.  `ownerId`: 所有人的身份证明,以防所有人不是组织.
11.  `onMutationSuccess`: 成功时触发的回调功能 的变异函数(创建、更新和删除).
12.  `additionalPayload`: 用于发送外地创建中的额外数据 载荷。 当创建一个 新建区域.
13.  `lookupOptions`: 指定支持的查找资源类型 字段。 当 `lookup` 包含在 `allowedKinds`。 。 。 .
14.  `allowSelectingAccessType`:布尔值(默认) `false`) (中文(简体) ). 设定为 `true`,允许选择字段访问类型(`everyone` 或者说 `restricted`(中文(简体) ) 并具体说明受限制的组织作用.

#### 使用量

```jsx
import { FieldsPane } from "@biginary/neeto-fields-frontend";

const [fieldPaneOpen, setFieldPaneOpen] = useState(false);

<FieldsPane
  isOpen={fieldPaneOpen}
  allowedKinds={["text", "number","lookup"]}
  resourceType="users"
  lookupOptions={[
    { label: "Contact", value: "contact" },
    { label: "Company", value: "company" }
  ]}
  additionalValidations={{
    hostSpecificInputName: validationSchema,
  }}
  initialValues={{ hostSpecificInputName: initialValue }}
  onClose={() => setFieldPaneOpen(false)}
>
  <HostSpecificInputFields />
</FieldsPane>;
```

## 3个. `FieldValuesContainer`

![FieldValuesContainer Image](https://i.ibb.co/K6Gz0FF/Neeto-Fields-Nano-2023-07-13-19-57-27.png)

  

这个 `FieldValuesContainer` 组件处理与 a 相关的字段值 特定资源.

#### 道具

1.  `resourceType`: 资源类型.
2.  `fieldValues`: 与从 反应.
3.  `fields`: 与资源类型相关的字段. 这是可选道具。 若为 未提供组件将在内部取回字段 .
4.  `resourceId`:资源标识.
5.  `ownerId`:主人的身份证. 只有当所有者不在时才需要这个道具 一个组织.
6.  `customComponents`: 如果主机应用程序有额外内容 `kind` 其他 ,您可以指定要显示的组件 与该道具对应。 这需要 `kind` 名称为 键和组件提供回调函数作为值。 回电 函数可以预期 `field` 作为参数的对象.
7.  `className`:为作型而取的班名.
8.  `showBorder`:布尔值以指定是显示还是隐藏边框. 默认真实.
9.  `formRefs`: 可用于访问Formik上下文的React Ref对象 键值对.
10.  `disabled`:布尔值指定是否禁用所有字段.
11.  `isRequiredColumnName`: 具有该值的列的名称 如果一个字段值是 `required` 说不说 默认是 `isRequired` 栏.
12.  `fieldClassName`: 样式的分类名称 `div` 包含输入 字段.
13.  `onMutate`:在突变上被触发的回调函数.
14.  `onMutationSuccess`: 成功时触发的回调功能 的变异函数(创建、更新和删除).
15.  `blockNavigation`: 指定是否封锁导航的布尔值 如果我们输入了未保存的字段值.
16.  `blockNavigationAlertProps`:要传递给警报的道具. 它接受 随后.
     -   `title`
     -   `message`
     -   `submitButtonLabel`
     -   `cancelButtonLabel`
17.  `canManageFieldValues`: 高于默认权限的布尔值 检查管理字段值。 未提供时,构成部分核对 `neeto_fields_engine.manage_field_values` 全球道具允许.

#### 使用量

说这里的资源是 `user`。 。 。 .

```jsx
import { FieldValuesContainer } from "@bigbinary/neeto-fields-frontend";

const formRefs = useRef({});
const queryClient = useQueryClient();

<FieldValuesContainer
  blockNavigation
  formRefs={formRefs}
  fieldValues={user.fieldValues} // We expect the user response from host's backend to send associated field_values with it.
  resourceId={user?.id}
  resourceType="users"
  onMutationSuccess={() =>
    queryClient.invalidateQueries({ queryKey: ["users"] })
  }
  onMutate={() => queryClient.setQueriesData({ queryKey: ["users"] }, modifier)}
  customComponents={{
    hostSpecificKindName: field => <HostSpecificInputFields />,
  }}
  blockNavigationProps={{
    title: "Changes not saved!",
    message: "You've not saved the changes made.",
  }}
/>;
```

### 4.四. `FieldInputs`

![FieldInputs image](https://i.ibb.co/9TmXnCx/Neeto-Fields-Nano-2023-07-14-00-38-03.png)

  

这个 `FieldInputs` 组件为获取的字段提供输入 UI.

#### 道具

1.  `fields`: 所有取出字段的数组.
2.  `customComponents`:如果主机应用程序除此之外还有任何其他类型 ,您可以指定要显示相应的组件 使用这个道具 它以善良的名字为关键 组件将调用函数作为值。 回调函数可以 预计 `field` 对象.
3.  `formRefs`: 可用于访问Formik上下文的React Ref对象 该表.
4.  `disabled`:布尔值指定是否禁用所有字段.
5.  `isRequiredColumnName`: 具有该值的列的名称 如果一个字段值是 `required` 说不说.

> 时间轴: **_说明:_**
> 
> 要初始化此窗体字段的值, 您需要使用 [`mergeInitialValues`](https://npmcn.com/package/%40bigbinary/neeto-fields-frontend/#readme-1-neetofieldsutilsmergeinitialvalues) 函数.
> 
> 要从窗体格式提交值, 您需要使用 [`transformValues`](https://npmcn.com/package/%40bigbinary/neeto-fields-frontend/#readme-2-neetofieldsutilstransformvalues) 要抓取的函数 正确的数据来自 neto-fields.

#### 使用量

```jsx
import {
  FieldInputs,
  useFetchFields,
  neetoFieldsUtils,
} from "@bigbinary/neeto-fields-frontend";

const formRef = useRef();

const HostForm = () => {
  const {
    data: { fields },
  } = useFetchFields({
    resourceType: "users",
  });

  const initialValues = neetoFieldsUtils.mergeInitialValues({
    initialValues: INITIAL_VALUES,
    fields,
  });
  return (
    <Form
      formikProps={{
        initialValues,
        validationSchema: VALIDATION_SCHEMA,
        onSubmit: values =>
          onSubmit(neetoFieldsUtils.transformValues({ values, fields })),
        enableReinitialize: true,
      }}
    >
      {/* Other host specific input fields */}

      <FieldInputs formRef={formRef} fields={fields} />

      <Button type="submit" label="Submit" />
    </Form>
  );
};
```

### 5 (韩语). `InlineFieldValueInput`

这个 `InlineFieldValueInput` 组件使字段值输入UI.

#### 道具

1.  `fields`: 所有取出字段的数组.
2.  `fieldValues`: 与资源相关的字段值.
3.  `resourceType`: 资源类型.
4.  `resourceId`:资源标识.
5.  `ownerId`: 所有人的身份证明,以防所有人不是组织.
6.  `onMutate`: 突变时触发的回调函数
7.  `onMutationSuccess`: 成功时触发的回调功能 具有字段价值的变异函数.
8.  `canManageFieldValues`: 高于默认权限的布尔值 检查管理字段值。 未提供时,构成部分核对 `neeto_fields_engine.manage_field_values` 全球道具允许.

#### 使用量

通常将此用作内部编辑字段值的组件 图表。 这个例子表明,建筑工程的其中一个用途是: `columnData` 用于表格 在单元格中包含可内置编辑字段值输入.

```jsx
const buildColumnDataForFields = (
  fields,
  onFieldValueUpdateSuccess,
  canWriteForm
) =>
  fields.map(field => ({
    dataIndex: "field.id",
    key: field.id,
    title: field.name,
    width: 250,
    render: (_, user) => (
      <InlineFieldValueInput
        {...{ field }}
        fieldValues={user.fieldValues}
        resourceId={user.id}
        resourceType="users"
        onMutationSuccess={onFieldValueUpdateSuccess}
        canManageFieldValues={canWriteForm}
      />
    ),
  }));
```

### 6\. 国家. `FieldDeleteAlert`

![Field delete alert](https://github.com/bigbinary/neeto-fields-nano/assets/35305344/6518b206-58f3-4375-bc68-7134ad68c168)

这个 `FieldDeleteAlert` 组件处理删除字段上的操作。 它接受 下列道具:

#### 道具

1.  `selectedField`:需要删除的字段.
2.  `ownerId`: 所有人的身份证明,以防所有人不是组织.
3.  `resourceTypeName`: 资源类型.
4.  `isDeleteAlertOpen`: 指定提醒是否打开的布尔状态 .
5.  `isDeleting`:布尔状态,表示是否正在删除字段 .
6.  `handleDelete`: 负责删除指定的回调函数 字段.
7.  `handleAlertClose`: 关闭时要执行的回调函数 警报.

#### 使用量

```jsx
import { FieldDeleteAlert } from "@biginary/neeto-fields-frontend";

const [isDeleteAlertOpen, setIsDeleteAlertOpen] = useState(false);

<FieldDeleteAlert
  selectedField={field}
  ownerId={formId}
  resourceTypeName="submission"
  isDeleteAlertOpen={isDeleteAlertOpen}
  isDeleting={isDeleting}
  handleDelete={handleDelete}
  handleAlertClose={() => setIsDeleteAlertOpen(false)}
/>;
```

## 职能

软件包导出 `neetoFieldsUtils`,其中包含两个工具 函数.

#### 1\. 联合国. `neetoFieldsUtils.mergeInitialValues`

此函数为 Folmik 窗体构建初始值,以包围 `<FieldInputs />` 组件.

#### 参数

-   `initialValues`: 不考虑初始值对象 `<FieldInputs />`
-   `fields`: 所有取出字段的数组.

#### 使用量

```jsx
import { useFetchFields } from "@bigbinary/neeto-fields-frontend";

const {
  data: { fields },
} = useFetchFields({ resourceType: "users" });

const initialValues = neetoFieldsUtils.mergeInitialValues({
  initialValues: FORMIK_INITIAL_VALUES,
  fields,
});
```

#### 2\. 联合国. `neetoFieldsUtils.transformValues`

此函数将 Formik 形式值转换并构建 `values` 对象 包括来自 `<FieldInputs />`。此已转换对象可以传递 页:1 `onSubmit` 函数.

#### 参数

-   `values`: Formik 形成值.

#### 使用量

```jsx
import { useFetchFields } from "@bigbinary/neeto-fields-frontend";

const {
  data: { fields },
} = useFetchFields({ resourceType: "users" });

<Form
  formikProps={{
    initialValues,
    validationSchema: VALIDATION_SCHEMA,
    onSubmit: values =>
      onSubmit(neetoFieldsUtils.transformValues({ values, fields })),
    enableReinitialize: true,
  }}
>
  {/* Form's children */}
</Form>;
```

### 钩子

#### 1\. 联合国. `useFetchFields`

这是回收所有田园的回放查询钩 .

#### 参数

-   `resourceType`: 要获取字段的资源 类型.
-   `ownerId`: 所有人的身份证明,以防所有人不是组织.

#### 使用量

```jsx
const {
  data: { fields, count, activeFieldsCount, inactiveFieldsCount },
} = useFetchFields({
  resourceType: "users",
  ownerId: "ownerId",
});
```

#### 2\. 联合国. `useShowField`

这是用于获取一个字段细节的回放查询钩 .

#### 参数

-   `fieldId`:获取细节的字段标识.
-   `ownerId`: 所有人的身份证明,以防所有人不是组织.

#### 使用量

```jsx
const {
  data: { field },
} = useShowField({ fieldId, ownerId });
```

#### 3个. `useCreateField`

这是创建字段的回放查询钩 .

#### 使用量

```jsx
const { mutate: create } = useCreateField();
const payload = {
  field: { name, kind, resourceType, ownerId, displayOrder, data },
};
create(payload);
```

#### 4.四. `useUpdateField`

这是用于更新字段的 React 查询钩 .

#### 使用量

```jsx
const { mutate: update } = useUpdateField();
const payload = {
  field: { name, kind, resourceType, ownerId, displayOrder, data },
};
update({ fieldId, payload });
```

#### 5 (韩语). `useDestroyField`

这是删除字段的回放查询钩 .

#### 使用量

```jsx
const { mutate: delete } = useDestroyField();
delete({ fieldId })
```

_通过 `ownerId` 也与有效载荷,以防所有者不是 组织._

## 出版指令

咨询 [构建和释放软件包](https://neeto-engineering.neetokb.com/articles/building-and-releasing-packages) 关于如何出版的详细指南.

## 一体化

| 项目 | 综合 |
| --- | :-: |
| 需要论坛 | : 白色 检查 标记 : |
| 必须去德士克 | : 白色 检查 标记 : |
| 需要规划 | : 白色 检查 标记 : |
| 需要切换 | : 白色 检查 标记 : |
| 需要聊天时 | : 白色 检查 标记 : |
| 需要卡尔 | : 白色 检查 标记 : |
| 需要测试 | : 白色 检查 标记 : |

## 常见问题

### @bigbinary/neeto-fields-frontend 是什么？

一个回波作为新纳米结构,配置,数据等的真理来源\.

### 如何安装 @bigbinary/neeto-fields-frontend？

在项目目录运行 npm install @bigbinary/neeto-fields-frontend，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：qs（6\.16\.2）、url（0\.11\.4）、yup（0\.32\.11）、antd（5\.22\.1）、util（^0\.12\.5）、axios（1\.20\.0）、dayjs（1\.11\.10）、ramda（0\.29\.0）、react（18\.3\.1）、buffer（^6\.0\.3）、formik（2\.4\.6）、i18next（22\.5\.1）、zustand（4\.4\.2）、dompurify（3\.4\.17）、js-logger（1\.6\.1）、react-dom（18\.3\.1）、classnames（2\.5\.1）、stream-http（3\.2\.0）、tailwindcss（^4\.1\.17）、lucide-react（0\.577\.0）、react-helmet（^6\.1\.0）、@dnd-kit/core（6\.3\.1）、os-browserify（0\.3\.0）、react-i18next（12\.3\.1）、vm-browserify（1\.1\.2）、@babel/runtime（7\.29\.7）、react-toastify（8\.0\.2）、tty-browserify（0\.0\.1）、path-browserify（^1\.0\.1）、https-browserify（1\.0\.0）、mixpanel-browser（^2\.45\.0）、react-router-dom（5\.3\.3）、@dnd-kit/sortable（10\.0\.0）、crypto-browserify（3\.12\.1）、source-map-loader（4\.0\.1）、stream-browserify（^3\.0\.0）、@bigbinary/neetoui（8\.8\.3）、@honeybadger-io/js（6\.10\.1）、@bigbinary/neeto-cist（1\.0\.17）、@honeybadger-io/react（6\.1\.25）、@tanstack/react-query（5\.59\.20）、@bigbinary/neeto-atoms（1\.1\.2）、@bigbinary/neeto-icons（1\.20\.89）、@bigbinary/neeto-molecules（5\.9\.13）、@tailwindcss/container-queries（^0\.1\.1）、@tanstack/react-query-devtools（5\.59\.20）、@bigbinary/neeto-commons-frontend（4\.14\.8）、@bigbinary/neeto-filters-frontend（4\.6\.2）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @bigbinary/neeto-fields-frontend 支持 TypeScript 吗？

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

### @bigbinary/neeto-fields-frontend 支持 ESM 还是 CommonJS？

同时提供 ES Module 与 CommonJS 入口，import 和 require\(\) 都可以使用，打包工具会自动选择合适的版本。

### @bigbinary/neeto-fields-frontend 需要什么版本的 Node\.js？

package\.json 的 engines 字段要求 Node\.js \>=22\.13。版本不符时 npm 默认只给出警告，开启 engine-strict 后会拒绝安装。

### @bigbinary/neeto-fields-frontend 可以商用吗？

@bigbinary/neeto-fields-frontend 使用 UNLICENSED 许可。作者声明为 UNLICENSED，即不授予公开使用许可（与公共领域的 Unlicense 不同）。使用前需获得作者授权。以上为概括，不构成法律意见，请以许可原文为准。

### @bigbinary/neeto-fields-frontend 的下载量有多少？

根据 npm 官方下载统计，@bigbinary/neeto-fields-frontend 在 2026/10/08 – 2026/11/06 这 30 天内被下载 11,163 次，日均约 372 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @bigbinary/neeto-fields-frontend 还在维护吗？

最新版本 4\.3\.2 发布于 2026/11/01（7 天前）；至今共发布 159 个版本，其中过去 12 个月发布了 49 个；首次发布于 2023/07/14。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。