antd select组件懒加载，后台搜索

最新推荐文章于 2025-10-01 02:51:38 发布

原创最新推荐文章于 2025-10-01 02:51:38 发布 · 1k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #react.js

代码专栏收录该内容

10 篇文章

订阅专栏

本文介绍了如何使用React和Ant Design库构建一个可搜索的下拉选择组件，实现实时加载数据并根据用户输入筛选选项。通过axios获取JSON数据，实现了数据分页和搜索功能。

import React, { useState, useEffect } from 'react';
import { Select } from 'antd';
import axios from 'axios';

export default function () {
    const limit = 10;
    const [options, setOptions] = useState([]);
    const [offset, setOffset] = useState(0);
    const [total, setTotal] = useState(0);
    const [searchValue, setSerachValue] = useState(null);

    function getData() {
        axios.get('./data.json').then(function (res) {
            let data = [...options];
            data = data.concat(res.data.rows);
            setOptions(data);
            setTotal(res.data.total);
        });
    }

    useEffect(()=>{
        getData();
    },[searchValue, offset]);


    return (
        <Select
            showSearch
            allowClear
            options={options}
            onDropdownVisibleChange={(open)=>{console.log(open); if (open) getData()}}
            onPopupScroll={(e)=>{
                const { target } = e;
                if (target.scrollTop + target.offsetHeight === target.scrollHeight) {
                    if (total > offset + limit) setOffset(offset + limit);
                }
            }}
            onSearch={(newVlaue)=>{
                setSerachValue(newVlaue);
                setOffset(0);
                setOptions([]);
            }}
        />
    );
}

data.json

{
  "total": 61,
  "rows": [
    {"key": 1, "value": "选项1"},
    {"key": 2, "value": "选项2"},
    {"key": 3, "value": "选项3"},
    {"key": 4, "value": "选项4"},
    {"key": 5, "value": "选项5"},
    {"key": 6, "value": "选项6"},
    {"key": 7, "value": "选项7"},
    {"key": 8, "value": "选项8"},
    {"key": 9, "value": "选项9"},
    {"key": 10, "value": "选项10"}
  ]
}