React+hook實現(xiàn)聯(lián)動模糊搜索

更新時間：2024年02月01日 08:44:27 作者：某哈壓力大

這篇文章主要為大家詳細介紹了如何利用React+hook+antd實現(xiàn)聯(lián)動模糊搜索功能,文中的示例代碼講解詳細,感興趣的小伙伴可以跟隨小編一起學習一下

背景

需要從用戶選中的機構(gòu)中，聯(lián)動加載相對應的有權(quán)處理人。

由于有權(quán)處理人數(shù)據(jù)量較大，并且需要動態(tài)加載，無法將所有枚舉都放在前端靜態(tài)資源中。

需要根據(jù)所選擇的機構(gòu)，默認加載一部分的處理人，剩下的，根據(jù)用戶手輸?shù)臄?shù)據(jù)，與后臺交互，模糊匹配對應的選項。

實現(xiàn)思路

使用React + hook + antd
需要對搜索框進行防抖處理，避免性能浪費
用戶清除搜索條件時，應該將枚舉列表恢復為上一狀態(tài)。

主要代碼實現(xiàn)

DebounceSelect：動態(tài)加載的下拉框

import React, { forwardRef, useImperativeHandle, useState, useMemo } from 'react';
import { Select, Spin } from "antd";
import debounce from "lodash/debounce";

export const DebounceSelect = forwardRef(({ fetchOptions, debounceTimeout = 800, ...props}, ref) => {
    const [fetching, setFetching] = useState(false);
    const [options, setOptions] = useState([]);
    const [userListBackUp, setUserListBackUp] = useSate([]);
    const [centerHandleOrg, setCenterHandleOrg] = useState("");
    const debounceFetcher = useMemo(() => {
        // keyWord：用戶輸入的關(guān)鍵字
        const loadOptions = (keyWord) => {
            if(!keyWord) return
            setOptions([]);
            setFetching(true);
            // 同時觸發(fā)父組件的fetchUserList，并傳入?yún)?shù)
            fetchOptions({centerHandleOrg, keyWord}).then(newOptions => {
                setOptions(newOptions);
                setFetching(false)
            })
        }
        return debounce(loadOptions, debounceTimeout);
    },[ centerHandleOrg, fetchOptions, debounceTimeout])
    
    // 向父組件拋出對象
    useImperativeHandle(ref, () => ({
        update: (list = [], _centerHandleOrg = "") => {
            setOptions(list);
            setUserListBackUp(list);
            setCenterHandleOrg(_centerHandleOrg);
        }
    }));
    
    return(
        <Select
            allowClear
            showSearch
            filterOption={false}
            onSearch={debounceFetcher}
            onClear={() => setOptions(userListBackUp)}
            notFoundContent={fetching ? <Spin size="small"/> : null}
            {...props}
            options={options}
        />
    )
})

父組件中機構(gòu)和處理人的部分靜態(tài)代碼實現(xiàn)

// ...相關(guān)依賴引入
<Row>
	<Col span={11}>
    	<Form.Item label="處理機構(gòu)" name="centerHandleOrg">
            <Select 
                allowClear
                showSearch
                filterOption={(val, option) => selectFilterIsBool(val, option)}
                onSelect={this.centerHandleOrgChangeHandle}
                onClear={() => this.debounceSelectRef.current.update()}>
            {this.state.centerHandleOrgList.map(item => (
                	<Option key={item.orgCode} value={item.orgCode}>
                    	{item.orgCode}-{item.orgName}
                    </Option>
                ))}
            
            </Select>     
        </Form.Item>
    </Col>
    <Col span={11}>
        <Form.Item label="處理人" name="centerHandleUser">
        	<DebounceSelect 
                ref={this.debounceSelectRef}
                placeholder="請輸入進行查找"
                fetchOption={this.fetchUserList}
                />
        </Form.Item>
    </Col>
</Row>

部分關(guān)鍵業(yè)務邏輯代碼實現(xiàn)

// 當用戶選中某一機構(gòu)時
centerHandleOrgChangeHandle = async (v) => {
    // 先置空處理人欄位
    this.formRef.current.setFieldsValue({
        centerHandleUser: "",
    })
    if(!v){
        return
    }
    // 獲取有權(quán)用戶列表（非全量）
    const data = {centerHandleOrg: v};
    const {list = []} = await getOrgUserList(data);
    this.debounceSelectRef.current.update(reNameObj(list));
}

// 當用戶輸入關(guān)鍵字進行檢索有權(quán)用戶時
// 在子組件中會觸發(fā)onSearch => 觸發(fā)fetchUserList
fetchUserList = async (data) => {
    return new Promise(resolve => {
         const data = {centerHandleOrg: v};
         const {list = []} = await getOrgUserList(data);
         resolve(reNameObj(list)); // 向子中注入新的options，查詢數(shù)據(jù)完成
    })
}

部分使用到的方法代碼實現(xiàn)如下

// 由于select是默認按照label，value做鍵的
const reNameObj = (list) => 
	list.map(({userName, userCode, ...rest}) => ({
        label: `${userCode}-${userName},`
		value: userCode,
        ...rest,
    }))

// 前端進行模糊匹配的時候，如果返顯的下拉選項為拼接后的話，會被拆成一個數(shù)組，無法直接匹配
const selectFilterIsBool = (val = "", option = "") => {
    if(option.props.children){
        if(Objec.prototype.toString.call(option.props.children) !== "[object Array]"){
            return option.props.children.includes(val);
        }
        return option.props.children.join("").includes(val);
    }
    return false;
}

部分效果預覽

搜索中：