react中回车enter事件处理
对于常见的搜索需求业务场景,用户输入完成后,点击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
react中回车enter事件处理的更多相关文章
- react中键盘enter事件处理
对于常见的搜索需求业务场景,用户输入完成后,点击enter事件请求数据,要求不提交页面,实现数据局部更新,这需要用到react中的表单Forms. 处理方法: (1)html书写 form标签中去掉a ...
- 浏览器中回车(Enter)和刷新的区别是什么?[转载]
在浏览器中回车和F5刷新有什么区别那?今天就来说说:浏览器中回车(Enter)和刷新的区别是什么? 这点事. 概论: 1.回车在 Expires有效的时候,是不会去请求服务器的,打开调试看到的请求也只 ...
- js防止回车(enter)键提交表单及javascript中event.keycode
如何防止回车(enter)键提交表单,其实很简单,就一句话.onkeydown="if(event.keyCode==13)return false;"把这句写在from标签里 ...
- React中的事件处理为什么要bind this?
个人总结: 问: 请给我讲一下React中的事件处理为什么要bind this? 答: 好的,比如说我写了一个类组件,有个onClick属性 ,onClick={ this.fun },如果不bind ...
- React中的合成事件
React中的合成事件 React自己实现了一套高效的事件注册.存储.分发和重用逻辑,在DOM事件体系基础上做了很大改进,减少了内存消耗,简化了事件逻辑,并最大程度地解决了IE等浏览器的不兼容问题. ...
- C#按回车Enter使输入焦点自动跳到下一个TextBox的方法收集
在录入界面中,用户往往需要按回车键时光标自动跳入下一个文本框,以方便录入操作.在C#中实现该功能有多种方法,以下是小编收集的不使用TAB键,而直接用回车键将光标转到下一个文本框的实现方法. 一.利用W ...
- 解决input的回车enter和失焦blur冲突问题:实现回车保存,blur还原编辑内容功能
最近做项目遇到: 背景:点击单元格,easyUI自动生成input可编辑框. 问题点:input的回车enter和失焦blur冲突问题:实现回车保存,blur还原编辑内容功能 要实现需求: 1.回车键 ...
- C#中回车出发事件(+收藏)
本文给大家介绍如何在c# winform中实现回车事件和回车键触发按钮的完美写法 我们常常要在c# winform中实现回车(enter)提交功能,这样比手动按按钮触发更快. 要完成回车按按钮功能,只 ...
- React 中阻止事件冒泡的问题
在正式开始前,先来看看 JS 中事件的触发与事件处理器的执行. JS 中事件的监听与处理 事件捕获与冒泡 DOM 事件会先后经历 捕获 与 冒泡 两个阶段.捕获即事件沿着 DOM 树由上往下传递,到达 ...
随机推荐
- asp.net mvc5 DataBase First下model校验问题(MetadataType使用)
最近学习asp.net mvc5,使用 asp.net mvc5+EF6+AutoFac做个小Demo,其中是先设计的数据库表,就直接选择了EF的DataBase First(三种开发模式分别是c ...
- 我理解的epoll(一)——实现分析
epoll项目中用了几次,但是对于其原理只是一知半解.我希望通过几篇blog能加深对她的理解. 我认为epoll是同步IO,因为他在调用epoll_wait时,内核在有I/O就绪前是阻塞的,虽然可以将 ...
- Man手册--nmap
目录 nmap使用手册 附录: nmap使用手册 附录: NMAP(1) Nmap Reference Guide NMAP(1) NAME nmap - Network exploration to ...
- Oracle笔记(十) 约束
表虽然建立完成了,但是表中的数据是否合法并不能有所检查,而如果要想针对于表中的数据做一些过滤的话,则可以通过约束完成,约束的主要功能是保证表中的数据合法性,按照约束的分类,一共有五种约束:非空约束.唯 ...
- PAT Basic 1084 外观数列 (20 分)
外观数列是指具有以下特点的整数序列: d, d1, d111, d113, d11231, d112213111, ... 它从不等于 1 的数字 d 开始,序列的第 n+1 项是对第 n 项的描述. ...
- 图像处理---《Mat对象 与 IplImage对象》
图像处理---<认识 Mat对象> Mat对象 与 IplImage对象 (1)Mat对象:OpenCV2.0之后引进的图像数据结构.自动分配内存.不存在内存泄漏的问题,是面向对象的数据结 ...
- Ubuntu系统---安装搜狗输入法
Ubuntu_搜狗输入法 第一步: 1,下载搜狗输入法的安装包. 下载地址为:http://pinyin.sogou.com/linux/ ,如下图,要选择与自己系统位数一致的安装包,我的系统是64位 ...
- AtCoder Beginner Contest 132 F Small Products
Small Products 思路: 整除分块+dp 打表发现,按整除分块后转移方向如下图所示,上面的块的前缀转移到下面的块 代码: #pragma GCC optimize(2) #pragma G ...
- Ubuntu 18.04实现实时显示网速
1.添加源 sudo add-apt-repository ppa:fossfreedom/indicator-sysmonitor 2.更新源 sudo apt-get update 3.安装sys ...
- 箭头函数与定时器的this指向问题
函数体内的this对象,就是定义时所在的对象,而不是使用时所在的对象. 箭头函数本身没有this,this继承上级的this. 定时器中箭头函数的this指向包含定时器的函数,所以定时器中的箭头函数要 ...