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 | 1x 1x 1x 1x 5x 1x 1x 1x 1x 1x 5x 3x 3x | import React, { useState } from "react"; import { AutoComplete } from "@tencent/tea-component/lib/autocomplete"; import { Input } from "@tencent/tea-component/lib/input"; import { Form } from "@tencent/tea-component/lib/form"; const options = [ { groupKey: "fruit", value: "strawberry", text: "草莓", tooltip: "甜甜甜" }, { groupKey: "fruit", value: "cranberry", text: "红莓", disabled: true }, { groupKey: "fruit", value: "raspberry", text: "树莓" }, { groupKey: "drink", value: "coca-cola", text: "可口可乐" }, { groupKey: "drink", value: "pepsi-cola", text: "百事可乐", tooltip: "百事可乐为什么比可口可乐好喝?", }, ]; const groups = { fruit: "水果", drink: "饮料", }; const INPUT_VALUE = "__user_input__"; const withInputOption = (options, text) => { const filteredOptions = options.filter(opt => opt.text.includes(text)); Iif (!filteredOptions.length) { filteredOptions.push({ value: INPUT_VALUE, text }); } return filteredOptions; }; export default function AutoCompleteExample() { const [inputValue1, setInputValue1] = useState(""); const [inputValue2, setInputValue2] = useState(""); return ( <Form> <Form.Item label="输入筛选"> <AutoComplete options={options.filter(({ text }) => text.includes(inputValue1))} groups={groups} keyword={inputValue1} tips="没有匹配的标签" onChange={value => { const option = options.find(opt => opt.value === value); setInputValue1(option.text); console.log(value); }} onScrollBottom={event => console.log(event)} > {ref => ( <Input ref={ref} value={inputValue1} onChange={value => setInputValue1(value)} /> )} </AutoComplete> </Form.Item> <Form.Item label="支持 options 外输入"> <AutoComplete options={withInputOption(options, inputValue2)} groups={groups} keyword={inputValue2} onChange={value => { const option = withInputOption(options, inputValue2).find( opt => opt.value === value ); setInputValue2(option.text); console.log(value); }} > {ref => ( <Input ref={ref} value={inputValue2} onChange={value => setInputValue2(value)} /> )} </AutoComplete> </Form.Item> </Form> ); } |