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: 5 · Posted: 2026-08-26

———         Thanks for Reading         ———

Give me a Star, Thanks:)

https://github.com/fendoudebb/LiteNote

扫描下方二维码关注公众号和小程序↓↓↓

扫描下方二维码关注公众号和小程序↓↓↓
Prev Post
Today In History
Browsing Refresh