ProFormSelect和CustomSelect使用Ant Design Pro

官方说明

https://procomponents.ant.design/components/field/#%E8%BF%9C%E7%A8%8B%E6%95%B0%E6%8D%AE

ProFormSelect

在需要时调用加载

const handleCreate = (title:string) => { request('/api/services/app/AppUpdateFileService/GetAppVersionFileOptions', {   method: 'Get', }).then(res => {   fills(res.result); }) }; const fills = (items:LabelValueItemDto[]) => { { setMembers(items) }; };

定义类型

export interface LabelValueItemDto {     value: string;     label: string; }

定义数据

const [members, setMembers] = useState<LabelValueItemDto[]>();

界面部分

<ProForm.Group>     {/* <ProFormSelect options= {members?.map(m => ({ label: m.label, value: m.value }))}  width="md" label="更新包文件夹" placeholder="更新包文件夹" fieldProps={{onChange:(val) => selectFilePath(val),}} >     </ProFormSelect> */}     <ProFormSelect options={members} width="md" label="更新包文件夹" placeholder="更新包文件夹" fieldProps={{onChange:(val) => selectFilePath(val),}} >     </ProFormSelect> </ProForm.Group>

获取选项值

const selectFilePath = (value:any) => { console.log(value); };

 

CustomSelect

页面部分

<CustomSelect showSearch dataSource={hosts} placeholder="程序集名" onChange={onHostChange} />

数据部分

hosts?: Array<KeyLabelsDto>; export interface KeyLabelsDto {     key: number;     label: string; }

事件部分

const onHostChange = (hostId: any) => { dispatch({   type: 'appversiontask/getAllSites',   payload: {     hostId   } }); };

遍历获取值

 createForm.setFieldsValue({        appAssembly : props.appversiontask.hosts?.find(item => item.key == form.getFieldValue("hostId"))?.label,     })