Ant Design Pro ProFormSelect 输入文字时禁止网络请求只在本地已有数据中过滤
Ant Design React About 1,355 words场景
ProFormSelect当下拉菜单数据来自网球请求时,输入文字过滤,默认会进行网络请求。
需改为只在本地进行过滤,用第一次请求来的数据即可。
代码
使用fieldProps下的fetchDataOnSearch属性,设置为false会禁止在输入文字使用request进行网络请求。
const MyComponent = () => {
const [options, setOptions] = useState();
const [params, setParams] = useState<{openedAt?: Date}>()
return <PageContainer>
<QueryFilter
layout="vertical"
autoFocusFirstInput={false}
onFinish={formData => {
}}
onReset={formData => {
}}
>
<ProFormSelect
name="myData"
label="My Data"
showSearch
params={params}
request={async (params) => {
console.log("select request", params);
if (options || !params.openedAt) return options;
const res = await request("/api/menu/options");
if (res.code !== 0) return options;
const opts = res.data.map((item: any) => ({
label: item,
value: item,
}));
setOptions(opts);
return opts;
}}
fieldProps={{
fetchDataOnSearch: false,
onOpenChange: visible => {
if (visible) {
setParams(prev => ({...prev, openedAt: new Date}))
}
},
}}
/>
</QueryFilter>
</PageContainer>
}
Views: 4 · Posted: 2026-08-26
———         Thanks for Reading         ———
Give me a Star, Thanks:)
https://github.com/fendoudebb/LiteNote扫描下方二维码关注公众号和小程序↓↓↓
Loading...