如何在React导航栏实现搜索功能

作者丨Hrushi M

创新互联公司2013年成立，先为杭锦等服务建站，杭锦等地企业，进行企业商务咨询服务。为杭锦企业网站制作PC+手机+微官网三网同步一站式服务解决您的所有建站问题。

　　译者 | 涂承烨

　　本文向你展示如何在React导航栏中实现搜索功能，具体包括如何配置搜索输入，监听用户数据输入回调，以及如何设置它的样式。

　　本文假设你已经安装了Superflows库，启动并运行了默认导航栏，添加了品牌信息，并自定义了菜单。本教程将从这里展开。

步骤1-显示/隐藏搜索输入框

　　要显示搜索输入框，需将showSearch属性设置为true，代码如下所示：

return (
        

                
        
);

　　显示效果如下所示：

搜索可见

移动端搜索可见

　　要隐藏搜索输入框，需将属性showSearch设置为false，代码如下所示：

return (
        

                
        
);

　　显示效果如下所示：

搜索隐藏

移动端搜索隐藏

步骤2-设置搜索输入框标题

　　要更改搜索框的标题，需将searchCaption属性设置为适当的字符串值，代码如下所示：

return (
        

                
        
);

　　显示效果如下所示：

搜索框标题更改

移动端搜索标题更改

步骤3-设置搜索输入框图标

　　你还可以在搜索输入框中添加一个图标。只需将searchIcon属性设置为图标对象即可。图标对象可以从任何库中获取。在下面的例子中，我使用了bootstrap图标库。

　　要更改搜索框图标，需将searchIcon属性设置为适当的字符串值，代码如下所示：

npm install react-bootstrap-icons

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

return (
        

                } />
        
);

　　显示效果如下所示：

搜索框图标

移动端搜索框图标

步骤4-处理回调

　　如果用户在搜索输入框中输入一些文本并按下回车键，导航栏会返回一个回调。你可以通过onSearchPressed属性来订阅这个回调函数，代码如下所示：

return (
        

               {alert(value)}}/>
        
);

步骤5-样式

　　你可以通过使用内联CSS或通过类名来自定义外观。Superflows导航栏展示了自定义样式的效果。代码如下所示：

return (
        

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

　　显示效果如下所示：

搜索框样式

移动端搜索框样式

　　本文向你展示了如何配置搜索输入框，如何显示/隐藏，如何更改标题，如何添加图标，如何处理回调，以及如何自定义和样式。

本文标题：如何在React导航栏实现搜索功能
本文来源：http://www.mswzjz.cn/qtweb/news22/242622.html

攀枝花网站建设、攀枝花网站运维推广公司-贝锐智能，是专注品牌与效果的网络营销公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 贝锐智能