react搜索框placeholder文字轮播

最新推荐文章于 2023-12-02 19:01:37 发布
最新推荐文章于 2023-12-02 19:01:37 发布
阅读量1k 收藏 3
点赞数 1
文章标签： react.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_49720804/article/details/129476612
版权

先看效果：

实现过程：

需要用到的变量如下：

这里的数组里面的数据是从接口拿的

 然后定义一个定时器    用一个定时器实现每三秒换一下placeholder的内容

 将数组传入组件的placeholder

 此时轮播已经实现了  在需要调用的阶段调用这个input轮播事件

接下来就是在鼠标点击（input聚焦时）清除掉这个轮播事件 当点击搜索时 将当前轮播到的这个值作为输入框的默认值，同样 在input失焦时也要重新调用轮播事件

然后还有一个需要注意的问题是 当你是用antd输入框里面一键清空清除时 直接失焦 且并没调用到blur事件 所以也无法继续轮播

解决办法就是 无论你是怎么清空输入框中的值 都将它重置为聚焦状态

将几个事件整合后：

效果：

 最后在点击button时 将当前值作为输入框默认值

这样就完成了

输入框和button基本都会用到防抖 可以封装成方法在需要使用时调用 防抖的方法可以参考 react组件封装input框的防抖处理_input防抖_Myx.x的博客-CSDN博客

前天的五花肉
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
搜索框轮播功能
ZMH的博客
03-05 2015
搜索框轮播功能 效果 不断轮播数据，直到用户点击搜索或完成输入 用户搜索时若无输入数据，则以当前轮播数据作为输入值，若有输入数据，则以输入数据作为搜索值 思路 文字轮播同样采用轮播图的形式（通过绝对定位浮现在输入框的位置，且输入框的层级要比轮播图高，否则会出现输入数据，输入框不显示） 用一个变量保存轮播图当前数据，使用轮播图中@change函数，每次轮播的时候报存当前轮播数据，且注意变量初始值为轮播数据首位 监听输入框的值，若有值，轮播图隐藏， 搜索时判断当前输入框有无值，有值则以它为搜索条件，无值则
CodeMirror实现类似input框的 placeholder提示效果
qq_45799465的博客
08-08 1719
在codemirror插件中实现一个类似于input框的placeholder效果，用来提示yaml文件如何书写
React中修改antd input框的placeholder样式 scss 写法
m0_53001289的博客
06-09 789
样式
React 页面滚动插件
谢子文的博客
11-30 1442
最开始感觉很easy, 上来就是原生 scrollIntoView()，但是发现其兼容性超级差，比如IE, Edge 这一微软派上不能平滑滚动，还有安卓，iOS 等浏览器上也支持得不是很友好。最近做 react 前端，有需求是软键盘弹起时，页面需要向上滚动，以避免软键盘挡住输入框。
react 字轮播滚动
最新发布
weixin_57017198的博客
12-02 1012
将文本分成两部分，并将它们重新拼接成一个新的字符串。这个新字符串就是要滚动显示的文本，它被渲染到页面上。将文本分成两部分，并将它们重新拼接成一个新的字符串。这个新字符串就是要滚动显示的文本，它被渲染到页面上。当然，在实际开发中，还可以根据需求进行更灵活的时间控制和动画效果的调整。在组件的构造函数中初始化了组件的 state，包括要滚动显示的文本。，可以更好地与浏览器的渲染机制进行协调，以提供更流畅的滚动效果。加入了组件的 state 中，用于记录上一次动画触发的时间戳。的 React 组件。
react-placeholder：一个React组件，可以在内容加载时轻松地用漂亮的占位符复制页面
02-05
React占位符 一个React组件，可以在内容加载时轻松地用漂亮的占位符复制页面。 您可以使用默认设置中的占位符，也可以通过自己的占位符！ import ReactPlaceholder from ' react-placeholder ' ; import " react-placeholder/lib/reactPlaceholder.css " ; React . renderComponent ( < div> < ReactPlaceholder type = ' media ' rows = { 7 } ready = { this . state . ready
react native 文字轮播的实现示例
10-18
主要介绍了react native 文字轮播的实现示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
React.js搜索框文字筛选实例
07-24
React.js搜索框文字筛选实例是一款默认设置文字列表数据，输入框输入相应关键词检索筛选效果。
React实现轮播效果
10-14
主要为大家详细介绍了React实现轮播效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
react中使用swiper不自动轮播以及分页器不显示等问题
m0_70542915的博客
11-08 1625
react中使用swiper不自动轮播以及分页器不显示等问题
React Native预设占位placeholder的使用
08-29
本篇文章主要介绍了React Native预设占位placeholder的使用，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
react-image-placeholder:一个简单的占位符组件，使用许多占位符站点中的一些
05-14
React图像占位符 一个简单的图像占位符组件，它使用很多占位符站点中的一些+时髦的赃物组件。 为什么？ 这里有很多占位符站点，我将它们重新组合为一个不错的小组件，以及他的弟弟（NicolasCage，BillMurray，StevenSeagal和VanillaIce）。 ImagePlaceholder使用以下站点： 和 ，了解更多通用信息 安装 npm install react-image-placeholder 用法（ES6 + JSX）： import ImagePlaceholder , { NicolasCage , BillMurray , StevenSeagal , TheHoff , VanillaIce } from './image-placeholder/image-placeholder' ; React . render ( < div>
苹果设备 搜索框内placeholder与放大镜按钮无法对齐的解决方案
nuanpang的博客
04-16 405
先来看个图片，考验像素眼的时候到了 有没有发现 请输入搜索内容 这几个字与左边的按钮么有对齐？ “细心的”美工【多么不喜欢这样说】提出这样一个bug，然后我只能老实改了。 纠结的是，用电脑看源码很是符合规范，用Google Chrome、火狐、ie9测试都垂直居中，安卓上也是好的，就苹果设备抽风。 左改右改都不对，原来单位都是用的rem，后面用px来测试，结构如下： &#x
前沿性能优化解决方案（SVG、flexbox、preload/prefetch、预渲染、windowing、Skeleton）
不想学习的打工人的博客
01-11 1153
移动端图标 SVG、flexbox、preload/prefetch、预渲染、windowing、骨架组件
React入门学习——第四天（DOM 的 diffing 算法）
WXY19990803的博客
03-21 181
目录 1. DOM 的 diffing 算法 知识一：DOM 的 diffing 算法 验证 Diffing 算法 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>验证diff算法</title> </head> <body> <!-- 准备好一个“容器” --> <div id="test"><
react placeholder 折行
ISaiSai的专栏
11-18 2157
&#10
React基础-JSX语法
qq_36822018的博客
09-03 1778
前言 学习和使用React有一段时间了，最近时间比较充裕，所以想把最近这段时间学习和使用react的心得和经验总结一下，从react的基础用法，到react-router、redux、immutable.js、styled-components等与react配套使用的一系列插件的使用都进行一个总结，写出来给大家分享下，本文只涉及基础用法，对于底层的原理和编译我另外再写文章表述。原文地址 ： Li...
修改输入框placeholder文字样式（颜色、字号等）
Fly的博客
06-21 6611
修改输入框placeholder文字样式（颜色、字号等） 1.html <input type="text" placeholder="请输入文本" /> 2.css input::-webkit-input-placeholder, textarea::-webkit-input-placeholder { color: red; } input:-moz-place...
react 仿造网易云音乐轮播图
10-31
React是一个用于构建用户界面的JavaScript库。它可以帮助开发者构建出高效、灵活且易于维护的应用程序。而网易云音乐的轮播图是一个非常经典的功能，我们可以通过React来实现类似的效果。 首先，我们可以利用React的组件化思想，将轮播图拆分成多个组件，如"Slider"组件、"Slide"组件等。"Slider"组件负责整体的布局和逻辑，而"Slide"组件负责单个图片的展示和样式； 其次，我们可以使用React的状态管理机制来控制轮播图的切换。可以通过useState来定义当前的图片索引，通过useEffect来监听索引的变化，并根据变化来改变轮播图的显示； 接着，我们需要利用React的生命周期函数，比如componentDidMount和componentWillUnmount，来处理轮播图的自动切换。通过设置定时器，在componentDidMount中启动自动切换功能，并在componentWillUnmount中清除定时器，以防止内存泄漏； 最后，我们可以使用React的事件处理机制，比如onClick来处理用户的操作。当用户点击上下一页或者圆点指示器时，可以通过更新状态来改变轮播图的显示。 综上所述，通过利用React的组件化思想、状态管理机制、生命周期函数以及事件处理机制，我们可以实现一个仿造网易云音乐轮播图的功能。这样我们就可以在应用中展示图片，并实现自动切换、手动切换等功能，提升用户体验。 React的灵活性和易用性使得开发此类功能变得非常简单和高效。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值