react中回车enter事件处理
2024-09-05 08:13:26
对于常见的搜索需求业务场景,用户输入完成后,点击enter事件请求数据,要求不提交页面,实现数据局部更新,这需要用到react中的表单Forms。
处理方法:
(1)html书写
form标签中去掉action参数,定义onSubmit方法,如下所示:
<div className="mc2">
<form onSubmit={(e) => this.getSearchData(e,this.state.searchkey)}>
<b></b>
<input name="searchkey" type="text" className="search" placeholder="请输入关键字" value={this.state.searchkey} onChange={(e) => this.change(e.target.name,e.target.value)}/>
</form>
</div>
(2)事件处理
关键的是阻止掉页面默认提交:
getSearchData(event,name) {
//ajax处理
event.preventDefault();//阻止页面提交刷新<br>}
连接:
http://www.cnblogs.com/sunLemon/p/9089911.html
https://www.imooc.com/learn/1012
最新文章
- ie6,ie7,ie8 css bug兼容解决记录
- 2003-can&#39;t connect to mysql server on &#39;localhost&#39;(10061) MySQL错误
- 【原创】三分钟教你学会MVC框架——基于java web开发(2)
- yield学习续:yield return迭代块在Unity3D中的应用——协程
- hdoj 5417 Victor and Machine
- extjs form submit 总是执行failure
- C++ 知识点1
- 关于微信的jsapi_ticket的获取方法;
- Fatal error: Class ‘mysqli’ not found in解决办法
- Hadoop-2.x启动HDFS和YARN的方式
- 头皮发麻的HTML课时一
- 高效率遍历Map以及在循环过程中移除 remove指定key
- Head First设计模式之桥接模式
- ASP.net里不让浏览器缓存代码和Session使用注意事项
- 鼠标拖动DOM
- linux的ls命令中文件颜色含义
- [SPOJ-CIRU]The area of the union of circles/[BZOJ2178]圆的面积并
- C#多线程编程实战(二):线程同步
- [剑指Offer]62-圆圈中最后剩下的数(约瑟夫环问题)(法二待做)
- 10.C#知识点:操作XML
热门文章
- js 数值精确运算使用math.js
- Maven的下载及安装
- 根据进程id pid 查容器id
- linux——系统命令
- java 中的 Math.round(-1.5) 等于多少?(未完成)
- requests模拟浏览器请求模块初识
- NotePad++ 使用 DBGp 调试php
- Qt QMutexLocker_自动解锁的机制
- 题解 [BZOJ1925][SDOI2010] 地精部落
- 解决document.getElementById(";";)在IE7中误读成name的bug