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()` -- ...
随机推荐
- .NET CORE学习笔记系列(3)——ASP.NET CORE多环境标识
在开发项目的过程当中,生产环境与调试环境的配置是不一样的.比如连接字符串. ASP .NET CORE 支持利用环境变量来动态配置 JSON 文件.ASP.NET Core 引用了一个特定的环境变量 ...
- centos7下kubernetes(17。kubernetes-回滚)
kubectl apply每次更新应用时kubernetes都会记录下当前配置,保存为一个revision(版次),这样就可以回滚到某个特定的revision 默认配置下,kubernetes只会保留 ...
- R语言学习——向量
以下为在RStudio中输入 #为注释符,其后内容程序不执行 > #向量是用于储存数值型.字符型或者逻辑型数据的一维数组.执行组合功能的函数c()可用来创建向量.示例如下: > a< ...
- 如何在已有的 Web 应用中使用 ReactJS
原文:How to Sprinkle ReactJS into an Existing Web Application 译者:nzbin 当我们学习一项新技术,可能是一个 JavaScript 框架, ...
- 【alpha阶段】第一次Scrum Meeting
每日任务内容 队员 昨日完成任务 明日要完成的任务 牛宇航 #2 数据库重构https://github.com/rRetr0Git/rateMyCourse/issues/2 #8 后端函数修正及重 ...
- PS制作简洁漂亮的立体抽丝文字
一.新建一个800*600px文档,并将Background图层创建一个副本,将其命名为Background_copy. 二.双击Background_copy图层,勾选渐变叠加,并设定以下数值 勾选 ...
- mybatis mapper映射文件全解
目录 select.update.delete.insert 设置参数类型以及取值 基本数据类型 对象数据类型 map数据类型 #{ } 和 ${ } 的区别 ResultMap Auto-map ...
- Flask 快速使用 进阶—— (2)
案例:可配置发送信息的系统 假如我们有这样的一个系统,可以发送短息,邮件和微信,后期可能还会增加一些平台,怎么才可以做到快速切换的去使用某种功能呢,在这里我会通过在配置文件中简单的配置就可以实现 在项 ...
- lr 函数--lr_save_string
lr_eval_string 返回脚本中一个参数当前的值 Returns the string argument after evaluating embedded parameters.一般都用 ...
- react 报错的堆栈处理
react报错 Warning: You cannot PUSH the same path using hash history 在Link上使用replace 原文地址https://reactt ...