我就廢話不多說了，大家還是直接看程式碼吧~

<Select
 placeholder="客戶名稱"
 showSearch
 optionFilterProp="children"//自動匹配輸入
 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下拉選擇,自動匹配功能的實現就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支援我們。