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

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

---
group:
  title: 云原生业务组件
---
# CndRcSelect 业务选择器


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


## 基本使用

```tsx preview
import React, { useState, useEffect }  from "react";
import { CndRcSelect, Button } from "@ali/cnd";
import axios from 'axios';
import { get } from 'lodash';

const Demo = () => {

  const [dataSource, setDataSource] = useState([]);
  const [item,setItem] = useState(0);

  const fetchData = async ( search = '', pageNumber = 1 ) => {
    console.log("params",search,pageNumber);
    const params = {
      PageNumber: pageNumber || 1,
      PageSize: 10,
      FilterParams:{Name:search},
    }
    const res = await axios.get('https://oneapi.alibaba-inc.com/mock/0801MSE/gateway/mse/migrate',{
      params
    });
    let data = get(res, 'data.data.Data.Result',[]).map((item)=>{
      return {
        label: item.GatewayUniqueId,
        value: item.GatewayUniqueId
      }
    })
    return {
      data: data,
      total: get(res, 'data.data.TotalSize')
    }
  }

useEffect(()=>{
  fetchData();
},[])

  return (
    <div>
      使用后端搜索：&nbsp;
      <CndRcSelect 
        style={{width: 300}}
        fetchData={fetchData} 
        useBackendSearch
        pagination={{
          pageNumber: 1,
          pageSize: 10,
        }}
        placeholder="请选择网关实例"
      /> 
     <br /> <br />
     使用前端搜索：&nbsp;
      <CndRcSelect 
        fetchData={fetchData}
        style={{width: 300}}
        pagination={{
          pageNumber: 1,
          pageSize: 10,
        }}/> 
    </div>
  );
};

export default Demo;
```


## CndRcSelect.AutoComplete

```tsx preview
import React,{ useState, useEffect } from "react";
import axios from 'axios';
import { get } from 'lodash';
import { CndRcSelect, Button } from "@ali/cnd";

const Demo = () => {

  const [dataSource, setDataSource] = useState([]);
  const [item,setItem] = useState(0);

  const fetchData = async ( search = '', pageNumber = 1 ) => {
    console.log("params",search,pageNumber);
    const params = {
      PageNumber: pageNumber || 1,
      PageSize: 10,
      FilterParams:{Name:search},
    }
    const res = await axios.get('https://oneapi.alibaba-inc.com/mock/0801MSE/gateway/mse/migrate',{
      params
    });
    let data = get(res, 'data.data.Data.Result',[]).map((item)=>{
      return {
        label: item.GatewayUniqueId,
        value: item.GatewayUniqueId
      }
    })
    return {
      data: data,
      total: get(res, 'data.data.TotalSize')
    }
  }

useEffect(()=>{
  fetchData();
},[])

  return (
    <div>
      使用后端分页方法：&nbsp;
      <CndRcSelect.AutoComplete 
        fetchData={fetchData} 
        useBackendSearch
        pagination={{
          pageNumber: 1,
          pageSize: 10,
        }}
        placeholder="请选择网关实例"
        style={{width: 300}}
      /> 
     <br /> <br />
     使用前端分页方法：&nbsp;
      <CndRcSelect.AutoComplete
        fetchData={fetchData} 
        style={{width: 300}}
        pagination={{
          pageNumber: 1,
          pageSize: 10,
        }}/> 
    </div>
  );
};

export default Demo;
```


## menuHeader定义

```tsx preview
import React, { useState, useEffect } from "react";
import axios from 'axios';
import { get } from 'lodash';
import { Button, CndRcSelect } from "@ali/cnd";

const Demo = () => {

  const [dataSource, setDataSource] = useState([]);
  const [item,setItem] = useState(0);

  const fetchData = async ( search = '', pageNumber = 1 ) => {
    const params = {
      PageNumber: pageNumber || 1,
      PageSize: 10,
      FilterParams:{Name:search},
    }
    const res = await axios.get('https://oneapi.alibaba-inc.com/mock/0801MSE/gateway/mse/migrate',{
      params
    });
    let data = get(res, 'data.data.Data.Result',[]).map((item)=>{
      return {
        label: item.GatewayUniqueId,
        value: item.GatewayUniqueId
      }
    })
    return {
      data: data,
      total: get(res, 'data.data.TotalSize')
    }
  }

useEffect(()=>{
  fetchData();
},[])

  return (
    <div>
      <h2>不使用头部</h2>
        <div>
          后端搜索：<CndRcSelect 
            fetchData={fetchData} 
            style={{width: 300}}
            useBackendSearch
            placeholder="请选择网关实例"
          /> 
        </div>
        <div style={{marginTop: 8}}>
          前端搜索：<CndRcSelect 
            fetchData={fetchData} 
            style={{width: 300}}
            placeholder="请选择网关实例"
          /> 
        </div>
        <h2>使用头部</h2>
        <div>
          使用默认头部：
          <CndRcSelect 
            fetchData={fetchData} 
            useBackendSearch
            menuHeaderProps={{
              headerProps: {
                text: '创建服务',
                clickFunc: () => {console.log('click')},
                refreshFunc: (search, page) => {console.log('fresh')}
              }
            }}
          /> 
        </div>
        <div style={{marginTop: 8}}>
        使用自定义渲染头部：<CndRcSelect 
            fetchData={fetchData} 
            useBackendSearch
            menuHeaderProps={{
              renderFunc:() => {return <div>自定义头部</div>}
            }}
        /> 
        </div>
    </div>
  );
};

export default Demo;
```

## API
继承所有 Select 的API，可跳转查看：https://xconsole.aliyun-inc.com/nexconsole/component_web/select?tabKey=develop#api

| 名称     | 类型                 | 说明                     | 默认值 |
| -------- | -------------------- | ------------------------ | ------ |
| style | 自定义内联样式 | [React.CSSProperties](https://github.com/DefinitelyTyped/DefinitelyTyped/blob/e434515761b36830c3e58a970abf5186f005adac/types/react/index.d.ts#L794) | - |  |
| className | 自定义 CSS class | String | - |  |
| useBackendSearch    | boolean       | 是否使用后端搜索    | false      | 
| menuHeaderProps | MenuHeaderProps              | 提示信息                 | -      |
| fetchData | fetchData: (search: string, page: number) => { data: any[], total: number } | 获取数据源的方法 | - |
| pagination | { pageNumber: number, pageSize: number } | 分页配置 | { pageNumber: 1, pageSize: 10 } |

### MenuHeaderProps
| 名称     | 类型                 | 说明                     | 默认值 |
| -------- | -------------------- | ------------------------ | ------ |
| headerProps | { text: string, clickFunc: () => void , refreshFunc: (search: string, page: number) => void} | 使用默认头部时的配置 | - |
| renderFunc | () => React.ReactNode | 使用自定义头部时的渲染函数 | - |

### CndRcSelect.AutoComplete

继承所有 Select.AutoComplete 的 API，可跳转查看：https://xconsole.aliyun-inc.com/nexconsole/component_web/select?tabKey=develop#selectautocomplete

| 名称             | 类型                                                                        | 说明                                                                                                                                                | 默认值                          |
| ---------------- | --------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------- |
| style            | 自定义内联样式                                                              | [React.CSSProperties](https://github.com/DefinitelyTyped/DefinitelyTyped/blob/e434515761b36830c3e58a970abf5186f005adac/types/react/index.d.ts#L794) | -                               |     |
| useBackendSearch | boolean                                                                     | 是否使用后端搜索                                                                                                                                    | false                           |
| menuHeaderProps  | MenuHeaderProps                                                             | 弹层菜单头部配置                                                                                                                                    | -                               |
| fetchData        | fetchData: (search: string, page: number) => { data: any[], total: number } | 获取数据源的方法                                                                                                                                    | -                               |
| pagination       | { pageNumber: number, pageSize: number }                                    | 分页配置                                                                                                                                            | { pageNumber: 1, pageSize: 10 } |
| refreshIndex | number | 触发刷新操作,重新请求fetchData | 0 |