cnd-components-mcp/componentData/components/mirror编辑器/envEditor.md

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

---
---
# 环境变量编辑器

## 代码库地址
https://code.alibaba-inc.com/cn-lowcode/cn-material-codemirror

### 基本用法

```jsx preview
import React from 'react';
import { EnvEditor } from '@ali/cnd';
import { Button } from '@alicloud/console-components';

export default () => {
  return (
    <EnvEditor
      value={{ aa: '', bb: '' }}
      onChange={console.log}
      hintText={'当前环境变量为通过函数计算FC应用发布时可引用的环境变量'}
    />
  );
};
```

### 校验

> form 实例可通过 children 的第一个参数或者 onChange 第二个参数 得到。

```jsx preview
import React, { useRef } from 'react';
import { EnvEditor } from '@ali/cnd';
import { Button } from '@alicloud/console-components';

export default () => {
  const VariableUiRef = useRef(null);
  const onSubmit = async () => {
    const res = await VariableUiRef.current.validate();
    console.log(res ? '校验成功' : '校验失败');
  };
  return (
    <>
      <Button type="primary" onClick={() => onSubmit()} style={{ marginBottom: 20 }}>
        校验
      </Button>
      <EnvEditor onChange={console.log} ref={VariableUiRef} />
    </>
  );
};
```

### Field 用法

```jsx preview
import React from 'react';
import { Field, Button } from '@alicloud/console-components';
import { EnvEditor } from '@ali/cnd';

export default () => {
  const field = Field.useField();
  const { init, getValue } = field;
  const initValue = { aa: '11' };
  const onSubmit = () => {
    console.log(getValue('data'), 'getValue');
  };
  return (
    <>
      <Button type="primary" onClick={() => onSubmit()} style={{ marginBottom: 20 }}>
        submit
      </Button>
      <EnvEditor
        {...init('data', {
          initValue: initValue,
          props: {
            onChange: console.log,
          },
        })}
      />
    </>
  );
};
```