译者丨Hrushi M
翻译者 | 涂承烨
责任编辑向你展现怎样在React导航系统栏中同时实现搜寻机能，具体内容主要包括怎样实用性搜寻输出，窃听使用者统计数据输出反弹，和怎样增设它的式样。
责任编辑假定你早已加装了Superflows库，开启并运转了预设导航系统栏，加进了国际品牌重要信息，并自订了工具栏。本讲义将从这儿进行。
关键步骤1-表明/暗藏搜寻快捷方式
要表明搜寻快捷方式，需将showSearch特性增设为true，标识符如下表所示右图：
return(
<SfNav showSearch={true}/>
);
表明效果如下表所示右图：
搜寻可见
移动端搜寻可见
要暗藏搜寻快捷方式，需将特性showSearch增设为false，标识符如下表所示右图：
return(
<SfNav showSearch={false} />
);
左右滑动查看完整标识符
表明效果如下表所示右图：
搜寻暗藏
移动端搜寻暗藏
关键步骤2-增设搜寻快捷方式标题
要更改搜寻框的标题，需将searchCaption特性增设为适当的字符串值，标识符如下表所示右图：
return(
<SfNav searchCaption=“Find”/>
);
左右滑动查看完整标识符
表明效果如下表所示右图：
搜寻框标题更改
移动端搜寻标题更改
关键步骤3-增设搜寻快捷方式图标
你还可以
要更改搜寻框图标，需将searchIcon属性增设为适当的字符串值，标识符如下表所示右图：
npm install react-bootstrap-icons
import {Search} from react-bootstrap-icons;
return(
);
左右滑动查看完整标识符
表明效果如下表所示右图：
搜寻框图标
移动端搜寻框图标
关键步骤4-处理反弹
如果使用者在搜寻快捷方式中输出一些文本并按下回车键，导航系统栏会返回一个反弹。你可以通过onSearchPressed特性来订阅这个反弹函数，标识符如下表所示右图：
return(
);
左右滑动查看完整标识符
关键步骤5-式样
你可以通过使用内联CSS或通过类名来自订外观。Superflows导航系统栏展现了自订式样的效果。标识符如下表所示右图：
return(
stylesSearchContainer={{backgroundColor: black, color: white, border: solid 1px gray}}
stylesSearchInput={{backgroundColor: #444, borderRadius: 10px, color: #efefef, paddingTop: 5px, paddingBottom: 5px}}
/>
);
左右滑动查看完整标识符表明效果如下表所示右图：
搜寻框式样
责任编辑向你展现了怎样实用性搜寻快捷方式，怎样表明/暗藏，怎样更改标题，怎样加进图标，怎样处理反弹，和怎样自订和式样。
原文链接：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年的开发经验。对项目管理、前后端开发、微服务、架构设计、物联网、大统计数据等较为关注。
