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 77 78 79 80 81 82 83 84 85 86 87 88 89 | 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 3x | import React, { useState, useEffect, useRef } from "react"; import { AutoComplete } from "@tencent/tea-component/lib/autocomplete"; import { StatusTip } from "@tencent/tea-component/lib/tips"; import { Input } from "@tencent/tea-component/lib/input"; const remoteOptions = [ { value: "strawberry", text: "草莓", tooltip: "甜甜甜" }, { value: "apple", text: "红莓", disabled: true }, { value: "orange", text: "树莓" }, { value: "coca-cola", text: "可口可乐" }, { value: "pepsi-cola", text: "百事可乐", tooltip: "百事可乐为什么比可口可乐好喝?", }, ]; export default function AutoCompleteAsyncExample() { const [options, setOptions] = useState([]); const [loading, setLoading] = useState(true); const [error, setError] = useState(false); const [inputValue, setInputValue] = useState(""); const timerRef = useRef(null); useEffect(() => { fetchOptions(); return () => timerRef.current && clearTimeout(timerRef.current); }, []); async function fetchOptions(keyword = "") { try { const options = await new Promise((resolve, reject) => { setTimeout(() => { if (Math.random() > 0.7) { reject(new Error()); return; } resolve(remoteOptions.filter(({ text }) => text.includes(keyword))); }, 1200); }); setOptions(options); } catch (err) { setError(true); } setLoading(false); } return ( <AutoComplete options={options} keyword={inputValue} tips={ <StatusTip status={loading ? "loading" : error ? "error" : "empty"} // eslint-disable-line no-nested-ternary onRetry={() => { setError(false); setLoading(true); fetchOptions(inputValue); }} /> } onChange={value => { const option = options.find(opt => opt.value === value); setInputValue(option.text); console.log(value); }} > {ref => ( <Input size="full" ref={ref} value={inputValue} onChange={value => { if (timerRef.current) { clearTimeout(timerRef.current); } timerRef.current = setTimeout(() => fetchOptions(value), 500); setLoading(true); setOptions([]); setInputValue(value); }} /> )} </AutoComplete> ); } |