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

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

## 基本使用
```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>
      使用后端搜索： 
      <CndRcSelect 
        style={{width: 300}}
        fetchData={fetchData} 
        useBackendSearch
        pagination={{
          pageNumber: 1,
          pageSize: 10,
        }}
        placeholder="请选择网关实例"
      /> 
     &lt;br /&gt; &lt;br /&gt;
     使用前端搜索：&nbsp;
      <CndRcSelect 
        fetchData={fetchData}
        style={{width: 300}}
        pagination={{
          pageNumber: 1,
          pageSize: 10,
        }}/> 
    &lt;/div&gt;
  );
};

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

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

export default Demo;
```