对于常见的搜索需求业务场景,用户输入完成后,点击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. Oracle笔记(十五) 数据库备份

    数据库的备份操作是在整个项目运行中最重要的工作之一. 一.数据的导出和导入 数据的导出和导入是针对于一个用户的备份操作,可以按照如下的方式完成: 1.  数据的导出 在硬盘上建立一个文件夹:c:\ba ...

  2. 解决Django项目静态资源无法访问的问题

    静态资源无法访问 url.py中配置 from django.conf.urls import url from django.views import static from django.conf ...

  3. web开发:javascript基础

    一.js引入 二.变量的定义 三.三种弹出框 四.调试方式 五.数据类型 六.数据类型转换 七.运算符 八.分支机构 九.循环结构 十.异常处理 十一.函数 一.js引入 - ES: ECMAScri ...

  4. Istio调用链埋点原理剖析—是否真的“零修改”分享实录(下)

    调用链原理和场景 正如Service Mesh的诞生是为了解决大规模分布式服务访问的治理问题,调用链的出现也是为了对应于大规模的复杂的分布式系统运行中碰到的故障定位定界问题.大量的服务调用.跨进程.跨 ...

  5. FFmpeg常用命令学习笔记(四)处理原始数据命令

    处理原始数据命令  通过音视频设备采集的.没有经过任何加工的数据叫原始数据,而像我们平时播放的比如mp4文件是压缩后的数据.视频原始数据是YUV格式,音频原始数据是PCM格式.FFmpeg可以从封装格 ...

  6. poj3694 Network[边双缩点+树剖/并查集]

    首先同一个点双内部的加边肯定不影响..所以先缩点成树,然后每次加一条边,这条对应的树上路径上所有边就都不是桥了,且每次操作独立作用,不相互影响(不过有可能本来一条边已经不是桥了又被标记了一次),所以每 ...

  7. SARS病毒 (生成函数 + 快速幂)

    链接:https://ac.nowcoder.com/acm/contest/992/A来源:牛客网 题目描述 目前,SARS 病毒的研究在世界范围内进行,经科学家研究发现,该病毒及其变种的 DNA ...

  8. GPU driven pipeline in metal

    https://developer.apple.com/documentation/metal/dynamic_terrain_with_argument_buffers?language=objc ...

  9. Fiddler 显示客户端请求时间,请求耗时,服务器地址

    # 效果图 打开 CustomRules.js (C:\Users\UsersName\Documents\Fiddler2\Scripts):打开 fiddler 时 windows 快捷键 -&g ...

  10. 无法安装 Composer 怎么办?

    详细方法参见 http://pkg.phpcomposer.com/ 下载 composer.phar ,放置到项目中 在同目录中执行命令行 echo @php "%~dp0composer ...