如何在React導航欄實現搜索功能

譯文精選

作者：涂承燁 2022-11-15 18:31:37

開發前端

本文向你展示如何在React導航欄中實現搜索功能

　　作者丨Hrushi M

　　譯者 | 涂承燁

　　本文向你展示如何在React導航欄中實現搜索功能，具體包括如何配置搜索輸入，監聽用戶數據輸入回調，以及如何設置它的樣式。

　　本文假設你已經安裝了Superflows庫，啟動并運行了默認導航欄，添加了品牌信息，并自定義了菜單。本教程將從這里展開。

步驟1-顯示/隱藏搜索輸入框

　　要顯示搜索輸入框，需將showSearch屬性設置為true，代碼如下所示：

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

　　顯示效果如下所示：

搜索可見

移動端搜索可見

　　要隱藏搜索輸入框，需將屬性showSearch設置為false，代碼如下所示：

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

　　顯示效果如下所示：

搜索隱藏

移動端搜索隱藏

步驟2-設置搜索輸入框標題

　　要更改搜索框的標題，需將searchCaption屬性設置為適當的字符串值，代碼如下所示：

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

　　顯示效果如下所示：

搜索框標題更改

移動端搜索標題更改

步驟3-設置搜索輸入框圖標

　　你還可以在搜索輸入框中添加一個圖標。只需將searchIcon屬性設置為圖標對象即可。圖標對象可以從任何庫中獲取。在下面的例子中，我使用了bootstrap圖標庫。

　　要更改搜索框圖標，需將searchIcon屬性設置為適當的字符串值，代碼如下所示：

npm install react-bootstrap-icons

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

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

　　顯示效果如下所示：

搜索框圖標

移動端搜索框圖標

步驟4-處理回調

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

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

步驟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>);

　　顯示效果如下所示：