用户登录

在搜索框里输入要搜索的东西,按一下回车键以后,会把搜索框里的内容添加到搜索历史这个列表里。输入内容提交搜索,会执行 fetchData 这个方法 .. 在这个方法里,我们再用一个 this.searchHistory(); 让它去执行一下 searchHistory 这个方法 ..

再去定义一下它 .. 名字是 searchHistory .. 这里我们要把用户搜索的东西放到 searchHistory 这个状态里 .. 先添加一个变量 .. 名字是 newSearchHistory .. 它的值就是用户刚刚提交的查询关键词,再加上当前的 searchHistory 这个状态里的内容 ..

它的值同样是一个数组 .. 用户刚刚提交的查询关键词就是当前的 query 这个状态的值 .. 因为用户每次在搜索框里输入内容的时候,我们都会设置一下 query 这个状态的值 ..

这个新的搜索历史里面,除了用户刚刚提交的搜索关键词 .. 还要加上当前 searchHistory 这个状态里的值 ... 这里我们可以使用一个 spread 操作符 ,输入 ... 后面是 this.state.searchHistory .. 这个 spread 操作符会把 searchHistory 这个状态里的项目全部展开,然后再把它们放到这个数组里面 ..

再去设置一下组件的状态 .. 要设置的是 searchHistory 这个状态 .. 它的新的值可以使用 newSearchHistory 来表示 .. 这样组件会重新显示 ..

保存 ... 在搜索框里输入点内容 .. 回车 执行一下搜索 .. 你会看到新的搜索记录会显示在这个页面的下面 .. 再试一下 .. 回车 .. 新的搜索记录会添加到这个历史搜索列表的最上面 ..

把新的搜索项目放到搜索历史记录列表里《 React Native #4 存储 》

统计

14696
分钟
0
你学会了
0%
完成

社会化网络

关于

微信订阅号

扫描微信二维码关注宁皓网,每天进步一点