antd Select進階功能 動態更新、函數防抖
阿新 • • 發佈:2018-11-19
lod 綁定 image 動態 list lse into rop spi
一、動態更新Options
Antd Select
自帶的搜索功能很多時候需要結合後端的接口,輸入一個關鍵字的時候會自動更新選擇器的選項. 下面列一些註意點
基礎實現
選擇器選項必須和每次更新的數據掛鉤, 這個值可以通過state
,也可以通過props
拿到
再結合循環的方法例如map
遍歷渲染options
import React, { PureComponent, Fragment } from ‘react‘ import { Select } from ‘antd‘ import axios from ‘axios‘ const Option = Select.Option; export default class AntSelect extends PureComponent{ ... handleSearch = (keywords) => { //請求後端搜索接口 axios(‘http://xxx.com/xxx‘, { keywords, }).then(data){ this.setState({ list: data }) } } render(){ const { list } = this.state; return( <Select mode="multiple" //多選模式 placeholder="請選擇" filterOption={false} //關閉自動篩選 onSearch={this.handleSearch} > { list.map((item, index) => ( <Option key={index} value={item}>{item}</Option> )) } </Select> ) } ... }
上面就是一個簡單的例子. 除了要動態渲染Options
以外, 還需要註意設置這個屬性:
filterOption={false}
如果不設置會導致即使拿到了最新的數據還是依舊顯示無匹配結果
因為filterOption
默認為true, 當你輸入內容時候,會先在已有選項裏面尋找符合項, 無論是否找到,都會重新渲染Options
,這樣你接口請求的數據的渲染被覆蓋了, 自然看不到結果了。所以需要把它關掉!
二、函數防抖
性能優化
因為輸入是屬於高頻js的操作, 所以我們需要使用到函數節流或者函數防抖.
這裏我直接使用函數防抖插件:lodash/debounce
import debounce from ‘lodash/debounce‘; //在constructor統一綁定事件. 和經常使用的bind(this)一樣 class AntSelect extends React.Component { constructor(props) { super(props); this.handleSearch = debounce(this.handleSearch, 500); } handleSearch = (value) => { ... } ... }
這樣你在輸入數據的500ms後才會觸發handleSearch
函數,可以大幅度減少調取後臺接口的次數!
出現加載狀態
antd已經給我們封裝好了加載狀態的組件:<Spin />
.然後通過state控制其出現和消失
class antdSelect extends React.Component { constructor(props) { super(props); this.state = { spinState: false, } } handleSearch = (keywords) => { ... //調用接口前清空數據, 出現加載icon this.setState({ list: [], spinState: true }) //請求後端搜索接口 axios(‘http://xxx.com/xxx‘, { keywords, }).then(data){ this.setState({ list: data, spinState: false }) } ... } render(){ const { list, spinState } = this.state; return( <Select ... notFoundContent={spinState ? <Spin /> : ‘暫無數據‘} onSearch={this.handleSearch} ... > { list.map((item, index) => ( <Option key={index} value={item}>{item}</Option> )) } </Select> ) } }
更多的可以查看官方文檔: 《Antd-Select》
antd Select進階功能 動態更新、函數防抖