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