如何在React導航欄實作搜尋功能

作者丨Hrushi M

　　譯者 | 塗承烨

　　本文向你展示如何在React導航欄中實作搜尋功能，具體包括如何配置搜尋輸入，監聽使用者資料輸入回調，以及如何設定它的樣式。

　　本文假設你已經安裝了Superflows庫，啟動并運作了預設導航欄，添加了品牌資訊，并自定義了菜單。本教程将從這裡展開。

步驟1-顯示/隐藏搜尋輸入框

　　要顯示搜尋輸入框，需将showSearch屬性設定為true，代碼如下所示：

return (
        <div>
                <SfNav showSearch={true}/>
        </div>);1.2.3.4.           

　　顯示效果如下所示：

搜尋可見

移動端搜尋可見

要隐藏搜尋輸入框，需将屬性showSearch設定為false，代碼如下所示：

return (
        <div>
                <SfNav showSearch={false} />
        </div>);1.2.3.4.           

　　顯示效果如下所示：

搜尋隐藏

移動端搜尋隐藏

步驟2-設定搜尋輸入框标題

　　要更改搜尋框的标題，需将searchCaption屬性設定為适當的字元串值，代碼如下所示：

return (
        <div>
                <SfNav searchCaption="Find" />
        </div>);1.2.3.4.           

　　顯示效果如下所示：

搜尋框标題更改

移動端搜尋标題更改

步驟3-設定搜尋輸入框圖示

　　你還可以在搜尋輸入框中添加一個圖示。隻需将searchIcon屬性設定為圖示對象即可。圖示對象可以從任何庫中擷取。在下面的例子中，我使用了bootstrap圖示庫。

　　要更改搜尋框圖示，需将searchIcon屬性設定為适當的字元串值，代碼如下所示：

npm install react-bootstrap-icons

import {Search} from 'react-bootstrap-icons';

return (
        <div>
                <SfNav searchIcon={<Search />} />
        </div>);1.2.3.4.5.6.7.8.           

　　顯示效果如下所示：

搜尋框圖示

移動端搜尋框圖示

步驟4-處理回調

　　如果使用者在搜尋輸入框中輸入一些文本并按下Enter鍵，導航欄會傳回一個回調。你可以通過onSearchPressed屬性來訂閱這個回調函數，代碼如下所示：

return (
        <div>
              <SfNav onSearchPressed={(value) => {alert(value)}}/>
        </div>);1.2.3.4.           

步驟5-樣式

　　你可以通過使用内聯CSS或通過類名來自定義外觀。Superflows導航欄展示了自定義樣式的效果。代碼如下所示：

return (
        <div>
              <SfNav 
                  stylesSearchContainer={{backgroundColor: 'black', color: 'white', border: 'solid 1px gray'}}
                  stylesSearchInput={{backgroundColor: '#444', borderRadius: '10px', color: '#efefef', paddingTop: '5px', paddingBottom: '5px'}}
              />
        </div>);1.2.3.4.5.6.7.           

　　顯示效果如下所示：

搜尋框樣式

移動端搜尋框樣式

　　本文向你展示了如何配置搜尋輸入框，如何顯示/隐藏，如何更改标題，如何添加圖示，如何處理回調，以及如何自定義和樣式。

原文連結：https://hackernoon.com/how-to-give-your-react-navbar-search-functionality

參考連結：

文檔

​https://superflows.dev/docs/building-blocks/nav/​​

代碼

​​https://stackblitz.com/edit/react-ts-4ld7az?file=App.tsx&ref=hackernoon.com​​

譯者簡介

　　塗承烨，51CTO社群編輯，資訊系統項目管理師、資訊系統監理師、PMP，某省綜合性評标專家，擁有15年的開發經驗。對項目管理、前後端開發、微服務、架構設計、物聯網、大資料等較為關注。

來源： 51CTO技術棧