antd的模糊搜索框該如何使用，這里通過一個列子說明一下：

HTML

<Item label="企業名稱">{getFieldDecorator('enterpriseId', {rules: [{required: true,message: '請輸入企業名稱',},],onChange:handleChangeCom,initialValue:enterId})(<SelectshowSearchallowClearplaceholder="輸入企業名稱關鍵字"notFoundContent={fetching ? <Spin size="small" /> : null}filterOption={false}onSearch={fetchUser}style={{ width: '100%' }}labelInValue>{decorationEnterprisesData.map((d) => (<Option key={d.enterpriseId} value={d.enterpriseId}>{d.nickName}</Option>))}</Select>,)}</Item>

參數說明：

showSearch： 使單選模式可搜索
allowClear： 支持清除
notFoundContent：當下拉列表為空時顯示的內容
onSearch：文本框值變化時回調（就是輸入關鍵字，從接口獲取的數據）
onChange：選中 option，或 input 的 value 變化（combobox 模式下）時，調用此函數
initialValue: 設置初始值

數據設置：

const [fetching, setFetching] = useState(false); // 是否獲取數據狀態 const [decorationEnterprisesData, setDecorationEnterprisesData] = useState([]); // 獲取到的數據 const [enterId,setenterId] = useState({ // 初始化搜索框的值label:"",key:"" });//接口獲取 async function fetchUser(values) {setFetching(true);const { code, data } = await Http.getDecoration({ //調用接口獲取數據，根據自己的接口來定義params: { keyword: values },});if (code === 'SUCCESS') {setFetching(true);setDecorationEnterprisesData(data);} } //輸入框改變 const handleChangeCom = (select) => {setenterId(select);setDecorationEnterprisesData([]); //清空所有數據setFetching(false); };

總結

以上是生活随笔為你收集整理的antd模糊搜索框的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。