Antd下拉選擇,自動匹配功能的實現(xiàn)
更新時間：2020年10月24日 10:48:17 作者：zerocher
這篇文章主要介紹了Antd下拉選擇,自動匹配功能的實現(xiàn)，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
我就廢話不多說了，大家還是直接看代碼吧~
<Select
placeholder="客戶名稱"
showSearch
optionFilterProp="children"http://自動匹配輸入
onChange={this.selectChange}
>
{this.state.selectCustomer}
</Select>
補充知識：antd select如何支持既能輸入不存在的選項又能進行下拉框選擇
1.Select必須具備onSearch,onBlur,onChange這三個屬性;
<Select
showSearch
value={this.state.value}
onSearch={…}
onBlur={…}
onChange={…}
{optionsFor}
2.在onSearch中使用回調，并設置
state {this.setState({ 'newState':val })}} onBlur={} onChange={...} > {optionsFor}
3.onChange設置回調
{this.setState({ 'newState':val })}} onBlur={} onChange={this.handleChange} > {optionsFor}
4.onBlur中利用三目判斷，并返回輸入的值
{this.setState({ 'newState':val })}} onBlur={()=>{ return this.state.newState?this.handleChange:null }} onChange={this.handleChange} > {optionsFor}
5.最后一步，也是最重要的，必須利用delete命令移除在state中設置的newState；
let finalState = this.state; delete newState['newState]; this.setState({finalState})
以上這篇Antd下拉選擇,自動匹配功能的實現(xiàn)就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
這篇文章主要介紹了ant design pro中可控的篩選和排序實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11
這篇文章主要介紹了vue項目在env文件中設置的變量無效問題及解決方案,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
vant如何實現(xiàn)Collapse折疊面板標題自定義
這篇文章主要介紹了vant如何實現(xiàn)Collapse折疊面板標題自定義，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
新項目采用?Vue3?作為前端項目框架,避免不了要使用?echarts,但是在使用的時候,出現(xiàn)了與?Vue2?使用不一樣的地方,所以特別記下來,希望給到有需要的同學一些幫助2023-10-10
眾所周知：目前可視化大屏,視頻播放等常見功能都需要用到全屏,本文將使用兩種技術實現(xiàn)全屏功能的封裝,讓不同技術棧的同學都可以輕松掌握,好了,讓我們來實現(xiàn)一個既兼容性強又易于管理的全屏功能組件吧,需要的朋友可以參考下2024-08-08
這篇文章主要介紹了Vue和React組件之間的傳值方式詳解，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-01-01
本文主要講解了如何在vue中使用pdfjs預覽pdf文件，這樣的優(yōu)勢是無須讓用戶安裝專門的軟件即可實現(xiàn)預覽，下面就看看如何實現(xiàn)這個需求2021-06-06
本文主要介紹了element中drawer模板的實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2023-07-07
這篇文章主要介紹了解決Antd輸入框卡頓問題以及Pubsub.js的使用方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-04-04
組件（Component）是 Vue.js 最強大的功能之一。本文重點給大家介紹vuejs組件相關知識，非常不錯，具有參考借鑒價值，感興趣的朋友一起看看吧2016-09-09