Press n or j to go to the next uncovered block, b, p or k for the previous block.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 | 1x 1x 1x 1x 1x 1x 1x 1x 1x | import React, { useState, useRef } from "react"; import { Select } from "@tencent/tea-component/lib/select"; import { LoadingTip } from "@tencent/tea-component/lib/tips"; const sleep = ms => new Promise(resolve => setTimeout(resolve, ms)); const MAX_PAGE = 3; export default function SelectLoadMoreExample() { const [hasMore, setHasMore] = useState(true); const [options, setOptions] = useState([]); const pageRef = useRef(0); const timerRef = useRef(null); const keywordRef = useRef(""); const fetch = (inputValue = "", page) => { if (timerRef.current) { clearTimeout(timerRef.current); timerRef.current = null; } if (keywordRef.current !== inputValue || page <= pageRef.current) { setOptions([]); setHasMore(true); } if (page > MAX_PAGE) { return; } pageRef.current = page; keywordRef.current = inputValue; const mock = async () => { await sleep(1000); if (keywordRef.current === inputValue && pageRef.current === page) { setOptions(options => [ ...options, ...Array(10) .fill(null) .map((_, i) => ({ value: `${inputValue}${page * 10 + i}`, text: `选项${page * 10 + i} ${inputValue}`, })), ]); // 假设只有这么多页 😶 if (page >= MAX_PAGE) { setHasMore(false); } } }; timerRef.current = setTimeout(mock, 300); }; return ( <Select searchable boxSizeSync size="m" type="simulate" appearance="button" filter={() => true} autoClearSearchValue={false} onOpen={() => fetch(keywordRef.current, 0)} onSearch={value => { fetch(value, 0); }} onScrollBottom={() => fetch(keywordRef.current, pageRef.current + 1)} options={options} onChange={value => console.log(value)} tips={null} bottomTips={hasMore && <LoadingTip />} /> ); } |