在工作中遇到一個(gè)需求，既能下拉選擇，有要求可以自由輸入沒(méi)有的選項(xiàng)。
剛開始考慮使用 Select 組件，發(fā)現(xiàn)只有多選（mode="tags"）的時(shí)候才能隨意輸入內(nèi)容，但多選又不符合當(dāng)前的業(yè)務(wù)需求。
在猶豫要不要自定義一個(gè)組件來(lái)實(shí)現(xiàn)業(yè)務(wù)需求時(shí)，發(fā)現(xiàn)了 AutoComplete 組件，完美實(shí)現(xiàn)需求。
AutoCompete 自動(dòng)完成文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-804689.html
- 適用情況
- 需要一個(gè)輸入框而不是選擇器
- 需要輸入建議 / 輔助提示（另一種形式的選項(xiàng)）
- 代碼示例
const Example = () => {
const options = ['python', 'Java'];
return (
<AutoComplete
options={options.map(item => ({ label: item, value: item }))}
/>
)
}
需要注意的是：AutoComplete 組件輸入框中回填的值為 options 中的 value 而不是 label，如果存在 label 和 value 不一致的情況則需要額外處理。文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-804689.html
到了這里，關(guān)于react + antd：AutoComplete 實(shí)現(xiàn)既可以自由輸入又能下拉選擇的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
