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();//阻止页面提交刷新
}
react中键盘enter事件处理的更多相关文章
- react中回车enter事件处理
对于常见的搜索需求业务场景,用户输入完成后,点击enter事件请求数据,要求不提交页面,实现数据局部更新,这需要用到react中的表单Forms. 处理方法: (1)html书写 form标签中去掉a ...
- React中的事件处理为什么要bind this?
个人总结: 问: 请给我讲一下React中的事件处理为什么要bind this? 答: 好的,比如说我写了一个类组件,有个onClick属性 ,onClick={ this.fun },如果不bind ...
- React中的合成事件
React中的合成事件 React自己实现了一套高效的事件注册.存储.分发和重用逻辑,在DOM事件体系基础上做了很大改进,减少了内存消耗,简化了事件逻辑,并最大程度地解决了IE等浏览器的不兼容问题. ...
- 译:DOM2中的高级事件处理(转)
17.2. DOM2中的高级事件处理(Advanced Event Handling with DOM Level 2) 译自:JavaScript: The Definitive Gu ...
- JS 捕获 input 中 键盘按键
JS 捕获 input 中 键盘按键 的相应处理事件是很简单的,google搜索一下很容易找到处理方式,请看如下一种简单的处理方式: HTML代码: <div> <input typ ...
- 键盘enter事件时间页面绑定
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- React 中阻止事件冒泡的问题
在正式开始前,先来看看 JS 中事件的触发与事件处理器的执行. JS 中事件的监听与处理 事件捕获与冒泡 DOM 事件会先后经历 捕获 与 冒泡 两个阶段.捕获即事件沿着 DOM 树由上往下传递,到达 ...
- react中如何使用动画效果
在react中想要加入动画效果 需要引入 import {CSSTransitionGroup} from 'react-transition-group' //加入react 动画包 import ...
- vue.js 键盘enter事件的使用
在监听键盘事件时,我们经常需要检查常见的键值.Vue 允许为 v-on 在监听键盘事件时添加按键修饰符: <!-- 只有在 `keyCode` 是 13 时调用 `vm.submit()` -- ...
随机推荐
- ThreadPoolExecutor解析
前言:在最新的阿里规范中强制使用ThreadPoolExecutor方式创建线程池,不允许使用Executors,因此有必要对ThreadPoolExecutor进行进一步了解. 1.ThreadPo ...
- 看完python这段爬虫代码,java流泪了c#沉默了
哈哈,其实很简单,寥寥几行代码网页爬一部小说,不卖关子,立刻开始. 首先安装所需的包,requests,BeautifulSoup4 控制台执行 pip install requests pip in ...
- OCR技术浅析-自写篇(2)
本例仅以本人浅薄理解,妄想自制文字识别程序,实际在识别部分未有完善. <?php class readChar{ private $imgSize; //图片尺寸 private $imgGd2 ...
- 三十三、ajaxFileUpload图片上传
$.ajaxFileUpload({ url : "api/upload/filesUpload", secureuri : false, //一般设置为false fileEle ...
- 292. Nim Game(easy)
You are playing the following Nim Game with your friend: There is a heap of stones on the table, eac ...
- 原生Ajax XMLHttpRequest对象
一.Ajax请求 - 现在常见的前后端分离项目中,一般都是服务器返回静态页面后浏览器加载完页面,运行script中的js代码,通过ajax向后端api发送异步请求获取数据,然后调用回调函数,将数据添加 ...
- OpenStack-Nova(4)
一. Nova概述 使用OpenStack Compute来托管和管理云计算系统.OpenStack Compute是基础架构即服务(IaaS)系统的主要部分.主要模块在Python中实现. Open ...
- Kubernetes一键部署利器:kubeadm
要真正发挥容器技术的实力,你就不能仅仅局限于对 Linux 容器本身的钻研和使用. 这些知识更适合作为你的技术储备,以便在需要的时候可以帮你更快的定位问题,并解决问题. 而更深入的学习容器技术的关键在 ...
- Linux命令(五)创建文件或修改文件时间 touch
Linux中 touch 命令可以改变文档或目录时间, 包括存取时间或更改时间, 也可以用于创建新文件. 命令格式: touch [选项] [参数] 选项: -a 只更改文件的读取时间. -m ...
- Callable,Future和FutureTask详解
1.Callable和Runnable 看Callable接口: public interface Callable<V> { /** * Computes a result, or th ...