我就廢話不多說(shuō)了，大家還是直接看代碼吧~

<Select
 placeholder="客戶名稱"
 showSearch
 optionFilterProp="children"http://自動(dòng)匹配輸入
 onChange={this.selectChange}
>
 {this.state.selectCustomer}
</Select>

補(bǔ)充知識(shí)：antd select如何支持既能輸入不存在的選項(xiàng)又能進(jìn)行下拉框選擇

1.Select必須具備onSearch,onBlur,onChange這三個(gè)屬性;

<Select
showSearch
value={this.state.value}
onSearch={…}
onBlur={…}
onChange={…}

{optionsFor}

2.在onSearch中使用回調(diào)，并設(shè)置

state {this.setState({ 'newState':val })}} onBlur={} onChange={...} > {optionsFor}

3.onChange設(shè)置回調(diào)

{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中設(shè)置的newState；

let finalState = this.state; delete newState['newState]; this.setState({finalState})

以上這篇Antd下拉選擇,自動(dòng)匹配功能的實(shí)現(xiàn)就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。