基于react?vant實現(xiàn)彈窗搜索功能

更新時間：2025年01月24日 08:31:14 作者：某哈壓力大

這篇文章主要為大家詳細介紹了如何基于react?vant實現(xiàn)彈窗搜索功能,文中的示例代碼講解詳細,感興趣的小伙伴可以跟隨小編一起學習一下

搜索 - Search 組件

彈出層的頂部用到了Search組件

1. action

Search組件中需要自定義右側(cè)的按鈕，可以使用showAction（默認文字為取消）+ actionText自定義按鈕文字；也可以使用action自定義右邊部分操作區(qū)域
官網(wǎng)文檔使用方法1：

<Search
  showAction
  label="地址"
  actionText={<div onClick={() => Toast.info(value)}>搜索</div>}
  value={value}
  onChange={setValue}
  placeholder="請輸入搜索關(guān)鍵詞"
/>

2. value

value 用于控制搜索框中的文字

value綁定的變量，通過onChange更新即可

3.點擊進行搜索

// 搜索關(guān)鍵詞
const onSearchClinic = async () => {
    // 前置校驗
    if (!searchName) {
      Toast('請輸入名稱關(guān)鍵字再進行搜索')
      return
    }
    // 開始搜索
    try {
      setSearchLoading('loading')
      const {
        data: { rows },
      } = await triggerClinicList()
      const _rows = [...rows].map((item) => ({
        ...item,
        value: item.code,
        text: item.name,
      }))
      setClinicList(_rows)
      setSearchLoading('sucess')
    } catch (error) {
      setSearchLoading('sucess')
    }
}

數(shù)據(jù)列表 - List 組件

List 組件滾動到底部時，會觸發(fā) onLoad 事件，此時可以發(fā)起異步操作并更新數(shù)據(jù)，若數(shù)據(jù)已全部加載完畢，則直接將 finished 設(shè)置成 true 即可。
react-vant - List 內(nèi)部包含了防止并發(fā)的重復請求的邏輯，使用中不需要額外處理

如果有分頁，則可以使用onLoad事件，項目中為全量返回，所以不需要這個。

選擇則某個診所之后進行反顯

搜索的字段和外層最終反顯的字段分為兩個記錄，關(guān)閉的時候或者每次打開的時候要清除內(nèi)部的字段（看業(yè)務要求）

const [clinicName, setClinicName] = useState('') // 外層業(yè)務字段
  const [searchName, setSearchName] = useState('') // 彈窗記錄搜索的關(guān)鍵字
// 點擊cell，進行選擇
const setClinicHandle = (v: any) => {
    // 更新外層輸入框名稱
    // 關(guān)閉彈窗
    onCloseClinicPop()
}

占位組件 - Empty

占位組件的圖片有兩個狀態(tài)：1.圖片顯示 2. loading顯示

占位組件的文案有兩個狀態(tài)：1.初始化時的搜索提醒 2. 搜索結(jié)果為空時的提醒

  // loading -- 加載中，wait -- 初始化， sucess -- 搜索完成（不論結(jié)果如何）
  const [searchLoading, setSearchLoading] = useState<'wait' | 'loading' | 'sucess'>('wait')

其他小細節(jié)

點擊外層按鈕，喚起彈窗時自動聚焦到搜索輸入框

const searchRef = useRef<SearchInstance | any>(null)
// 顯示
const onShowClinicPop = () => {
    // do something 點擊前校驗，清空搜索關(guān)鍵詞 onClearClinic
    setShowClinicPop(true) // 彈窗
    setTimeout(() => {
      if (searchRef && searchRef.current) {
        searchRef.current?.focus() // 設(shè)置焦點
      }
    }, 0)
 }
// 關(guān)閉彈窗
const onCloseClinicPop = () => {
    if (searchRef && searchRef.current) {
      searchRef.current?.blur() // 設(shè)置焦點
    }
    setShowClinicPop(false)
}

部分代碼如下

<Popup
position="bottom"
round={true}
visible={showClinicPop}
onClose={onCloseClinicPop}
style={{ height: '60vh' }}
>
    <div className="popup-header">
      <VantButton
        style={{
          border: 'none',
          boxShadow: 'none',
          backgroundColor: 'transparent',
          color: 'inherit',
        }}
        icon={<Cross />}
        onClick={onCloseClinicPop}
      />
    </div>
    <Search
      action={
        <div
          className="search-text"
          onClick={onSearchClinic}
        >
          搜索
        </div>
      }
      value={searchName}
      onChange={(v) => {
        setSearchName(v)
      }}
      placeholder="輸入名稱關(guān)鍵字"
      onSearch={onSearchClinic}
      onClear={onClearClinic}
      ref={searchRef}
    />
    <div style={{ height: 'calc(60vh - 98px)', overflowY: 'auto' }}>
      {clinicList?.length > 0 ? (
        <List
          onLoad={() => new Promise(() => {})}
          finished={true}
        >
          {clinicList.map((item, index) => (
            <Cell
              key={index}
              value={item.text}
              isLink
              arrowDirection="right"
              valueClass="text-[#323232]"
              onClick={() => {
                setClinicHandle(item.code)
              }}
            />
          ))}
        </List>
      ) : (
        <Empty
          image={
            searchLoading === 'loading' ? (
              <div className="empty-loading">
                <Loading type="ball" />
              </div>
            ) : (
              'search'
            )
          }
          description={
            searchLoading === 'sucess'
              ? '搜索列表為空'
              : searchLoading === 'wait'
                ? '點擊搜索查找您的診所'
                : ''
          }
        />
      )}
    </div>
</Popup>

到此這篇關(guān)于基于react vant實現(xiàn)彈窗搜索功能的文章就介紹到這了,更多相關(guān)react vant彈窗搜索內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: