建站
咨詢
售后
建站咨詢
新聞中心
作者丨Hrushi M
創(chuàng)新互聯(lián)公司2013年成立，先為杭錦等服務(wù)建站，杭錦等地企業(yè)，進(jìn)行企業(yè)商務(wù)咨詢服務(wù)。為杭錦企業(yè)網(wǎng)站制作PC+手機(jī)+微官網(wǎng)三網(wǎng)同步一站式服務(wù)解決您的所有建站問題。
譯者 | 涂承燁
本文向你展示如何在React導(dǎo)航欄中實(shí)現(xiàn)搜索功能，具體包括如何配置搜索輸入，監(jiān)聽用戶數(shù)據(jù)輸入回調(diào)，以及如何設(shè)置它的樣式。
本文假設(shè)你已經(jīng)安裝了Superflows庫，啟動(dòng)并運(yùn)行了默認(rèn)導(dǎo)航欄，添加了品牌信息，并自定義了菜單。本教程將從這里展開。
步驟1-顯示/隱藏搜索輸入框
要顯示搜索輸入框，需將showSearch屬性設(shè)置為true，代碼如下所示：
return (
);
顯示效果如下所示：
搜索可見
移動(dòng)端搜索可見
要隱藏搜索輸入框，需將屬性showSearch設(shè)置為false，代碼如下所示：
return (
);
顯示效果如下所示：
搜索隱藏
移動(dòng)端搜索隱藏
步驟2-設(shè)置搜索輸入框標(biāo)題
要更改搜索框的標(biāo)題，需將searchCaption屬性設(shè)置為適當(dāng)?shù)淖址担a如下所示：
return (
);
顯示效果如下所示：
搜索框標(biāo)題更改
移動(dòng)端搜索標(biāo)題更改
步驟3-設(shè)置搜索輸入框圖標(biāo)
你還可以在搜索輸入框中添加一個(gè)圖標(biāo)。只需將searchIcon屬性設(shè)置為圖標(biāo)對(duì)象即可。圖標(biāo)對(duì)象可以從任何庫中獲取。在下面的例子中，我使用了bootstrap圖標(biāo)庫。
要更改搜索框圖標(biāo)，需將searchIcon屬性設(shè)置為適當(dāng)?shù)淖址?，代碼如下所示：
npm install react-bootstrap-icons
import {Search} from 'react-bootstrap-icons';
return (
);
} />
顯示效果如下所示：
搜索框圖標(biāo)
移動(dòng)端搜索框圖標(biāo)
步驟4-處理回調(diào)
如果用戶在搜索輸入框中輸入一些文本并按下回車鍵，導(dǎo)航欄會(huì)返回一個(gè)回調(diào)。你可以通過onSearchPressed屬性來訂閱這個(gè)回調(diào)函數(shù)，代碼如下所示：
return (
);
{alert(value)}}/>
步驟5-樣式
你可以通過使用內(nèi)聯(lián)CSS或通過類名來自定義外觀。Superflows導(dǎo)航欄展示了自定義樣式的效果。代碼如下所示：
return (
);
stylesSearchContainer={{backgroundColor: 'black', color: 'white', border: 'solid 1px gray'}}
stylesSearchInput={{backgroundColor: '#444', borderRadius: '10px', color: '#efefef', paddingTop: '5px', paddingBottom: '5px'}}
/>
顯示效果如下所示：
搜索框樣式
移動(dòng)端搜索框樣式
本文向你展示了如何配置搜索輸入框，如何顯示/隱藏，如何更改標(biāo)題，如何添加圖標(biāo)，如何處理回調(diào)，以及如何自定義和樣式。
分享名稱：如何在React導(dǎo)航欄實(shí)現(xiàn)搜索功能
轉(zhuǎn)載來源：http://www.5511xx.com/article/coghije.html
