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

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

## 基本使用
```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,
              },
            ],
          })}
        />
      &lt;/Form.Item&gt;
      &lt;Button type="primary" onClick={onValidate}&gt;
        校验
      &lt;/Button&gt;
    &lt;/Form&gt;
  );
};

export default Demo;
```