对于常见的搜索需求业务场景,用户输入完成后,点击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事件处理的更多相关文章

  1. react中键盘enter事件处理

    对于常见的搜索需求业务场景,用户输入完成后,点击enter事件请求数据,要求不提交页面,实现数据局部更新,这需要用到react中的表单Forms. 处理方法: (1)html书写 form标签中去掉a ...

  2. 浏览器中回车(Enter)和刷新的区别是什么?[转载]

    在浏览器中回车和F5刷新有什么区别那?今天就来说说:浏览器中回车(Enter)和刷新的区别是什么? 这点事. 概论: 1.回车在 Expires有效的时候,是不会去请求服务器的,打开调试看到的请求也只 ...

  3. js防止回车(enter)键提交表单及javascript中event.keycode

      如何防止回车(enter)键提交表单,其实很简单,就一句话.onkeydown="if(event.keyCode==13)return false;"把这句写在from标签里 ...

  4. React中的事件处理为什么要bind this?

    个人总结: 问: 请给我讲一下React中的事件处理为什么要bind this? 答: 好的,比如说我写了一个类组件,有个onClick属性 ,onClick={ this.fun },如果不bind ...

  5. React中的合成事件

    React中的合成事件 React自己实现了一套高效的事件注册.存储.分发和重用逻辑,在DOM事件体系基础上做了很大改进,减少了内存消耗,简化了事件逻辑,并最大程度地解决了IE等浏览器的不兼容问题. ...

  6. C#按回车Enter使输入焦点自动跳到下一个TextBox的方法收集

    在录入界面中,用户往往需要按回车键时光标自动跳入下一个文本框,以方便录入操作.在C#中实现该功能有多种方法,以下是小编收集的不使用TAB键,而直接用回车键将光标转到下一个文本框的实现方法. 一.利用W ...

  7. 解决input的回车enter和失焦blur冲突问题:实现回车保存,blur还原编辑内容功能

    最近做项目遇到: 背景:点击单元格,easyUI自动生成input可编辑框. 问题点:input的回车enter和失焦blur冲突问题:实现回车保存,blur还原编辑内容功能 要实现需求: 1.回车键 ...

  8. C#中回车出发事件(+收藏)

    本文给大家介绍如何在c# winform中实现回车事件和回车键触发按钮的完美写法 我们常常要在c# winform中实现回车(enter)提交功能,这样比手动按按钮触发更快. 要完成回车按按钮功能,只 ...

  9. React 中阻止事件冒泡的问题

    在正式开始前,先来看看 JS 中事件的触发与事件处理器的执行. JS 中事件的监听与处理 事件捕获与冒泡 DOM 事件会先后经历 捕获 与 冒泡 两个阶段.捕获即事件沿着 DOM 树由上往下传递,到达 ...

随机推荐

  1. linux基础1_文件类型、拓展名、目录配置

    命令ls -l,显示的第一个属性代表了这个档案的档案类型 [d]:目录 [-]:普通文件 [l]:连接文件 [b]:存储数据以供系统访问的接口设备 [c]:串行接口的端口设备,例如键盘.鼠标 [s]: ...

  2. linux安装vsftpd后无法登陆

    安装完成后在主机上登陆时,不管是输入用户,还是匿名都无法登陆 经过检查,发现是因为/etc/hosts.deny禁止了所有ip访问 将hosts.deny中的all:all删除,或者在/etc/hos ...

  3. C# 一个数组集合,任意组合,不遗漏,不重复

    using System; using System.Collections.Generic; using System.Diagnostics; using System.Linq; using S ...

  4. Linux系统上对其他用户隐藏进程的简单方法

    mount -o remount,rw,hidepid=2 /proc 我使用的是多用户系统,大部分的用户通过ssh客户端访问他们的资源.我如何(怎么样)避免泄露进程信息给他们?如何(怎么样)在Deb ...

  5. Matlab---绘图及其位置摆放

    Matlab---绘图及其位置摆放 [@WP@20180509] 一.绘图函数 (1)绘制二维图形 (1.1) plot( ) 函数的应用格式. 1,plot(x). 当x 为一向量时,以x 元素的值 ...

  6. kotlin字符串模板&条件控制

    字符串模版: 小时候都有要求记日记的习惯,下面是一小学生记的日记: 很漂亮的流水账,那细分析一下这些文件其实大体都类似,只有几个不同点: 其实就是地点变了,那对于这种有规律的文字可以采用kotlin的 ...

  7. 平衡树treap 0基础详解

    刚开始学treap..同学在台上给我们讲,貌似除我之外的机房dalao们都听懂了就我发呆...(滑稽) 于是,事后的窝只能自己上网翻书研究了.... treap: treap=tree+heap,树+ ...

  8. No provider available from registry出错

    dubbo+zookeeper进行分布式远程调用时No provider available from registry出错 查看dubbo服务:http://192.168.0.100:8080/d ...

  9. 16-SQLServer强制走索引

    一.注意点 1.使用with(index(索引名称))来使SQL强制走索引. 二.示例截图 1.创建非聚集索引 2.不使用with,不走索引的截图 3.使用with,强制走索引的截图

  10. 基于IAP的STM32程序更新技术

    引言 嵌入式系统的开发最终需要将编译好的代码下载到具体的微控制器芯片上,而不同厂家的微控制器芯片有不同的下载方式.随着技术的发展和应用需求的更新,用户程序加载趋向于在线编程的方式,越来越多的芯片公司提 ...