cnd-components-mcp/componentData/components/CndKeyValue.md

An MCP service for Cnd components query | 一个减少 Cnd 组件代码生成幻觉的 MCP 服务，包含系统提示词、组件文档、API 文档、代码示例和更新日志查询

---
group:
  title: 云原生业务组件
---

# KeyValue kv组件

## 代码库地址
https://code.alibaba-inc.com/cn-lowcode/cnd-key-value
## 基本使用

```tsx preview
import React from "react";
import { KeyValue } from "@ali/cnd";

const Demo = () => {
  return <KeyValue onChange={console.log} />;
};

export default Demo;
```

## value 回显

```tsx preview
import React from "react";
import { KeyValue } from "@ali/cnd";

const Demo = () => {
  return <KeyValue value={[{ key: "a", value: 1 }]} onChange={console.log} />;
};

export default Demo;
```

## 校验

```tsx preview
import React from "react";
import { KeyValue, Button, Field, Form  } from "@ali/cnd";

const { customValidate } = KeyValue;
const FORM_LAYOUT = {
  labelCol: {
    fixedSpan: 6,
  },
  labelTextAlign: "left",
};

const Demo = () => {
  const field = Field.useField();
  const { init, validate } = field;
  const onValidate = () => {
    validate((errors, values) => {
      if (errors) return;
    });
  };

  return (
    <Form field={field} {...FORM_LAYOUT}>
      <Form.Item label="环境变量" required>
        <KeyValue
          {...init("env", {
            rules: [
              {
                validator: customValidate,
              },
            ],
          })}
        />
      </Form.Item>
      <Button type="primary" onClick={onValidate}>
        校验
      </Button>
    </Form>
  );
};

export default Demo;
```

> 组件提供了默认的校验方法 `customValidate` 和 转化数据格式方法 `customFormat`

## API

| 属性            | 说明                   | 类型            | 默认值 |
| --------------- | ---------------------- | --------------- | ------ |
| value           | 值                     | [Item](#item)[] | -      |
| onChange        | 数据发生改变时触发事件 | () => void      | -      |
| prefixKeyText   | key 输入框前附加文字   | string          | Key    |
| prefixValueText | value 输入框前附加文字 | string          | Value  |

### Item

| 属性  | 说明  | 类型   | 默认值 |
| ----- | ----- | ------ | ------ |
| key   | key   | string | -      |
| value | value | string | -      |