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

最新推荐文章于 2023-07-26 15:35:33 发布

AlienLiang

最新推荐文章于 2023-07-26 15:35:33 发布

阅读量854

点赞数 1

分类专栏：代码文章标签： javascript 前端 react.js

本文链接：https://blog.csdn.net/topalien/article/details/125414511

版权

代码专栏收录该内容

10 篇文章 0 订阅

订阅专栏

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"}
  ]
}