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

  1. react中回车enter事件处理

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

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

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

  3. React中的合成事件

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

  4. 译:DOM2中的高级事件处理(转)

    17.2. DOM2中的高级事件处理(Advanced Event Handling with DOM Level 2)        译自:JavaScript: The Definitive Gu ...

  5. JS 捕获 input 中 键盘按键

    JS 捕获 input 中 键盘按键 的相应处理事件是很简单的,google搜索一下很容易找到处理方式,请看如下一种简单的处理方式: HTML代码: <div> <input typ ...

  6. 键盘enter事件时间页面绑定

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

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

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

  8. react中如何使用动画效果

    在react中想要加入动画效果 需要引入 import {CSSTransitionGroup} from 'react-transition-group' //加入react 动画包 import ...

  9. vue.js 键盘enter事件的使用

    在监听键盘事件时,我们经常需要检查常见的键值.Vue 允许为 v-on 在监听键盘事件时添加按键修饰符: <!-- 只有在 `keyCode` 是 13 时调用 `vm.submit()` -- ...

随机推荐

  1. .NET CORE学习笔记系列(3)——ASP.NET CORE多环境标识

    在开发项目的过程当中,生产环境与调试环境的配置是不一样的.比如连接字符串. ASP .NET CORE 支持利用环境变量来动态配置 JSON 文件.ASP.NET Core 引用了一个特定的环境变量  ...

  2. centos7下kubernetes(17。kubernetes-回滚)

    kubectl apply每次更新应用时kubernetes都会记录下当前配置,保存为一个revision(版次),这样就可以回滚到某个特定的revision 默认配置下,kubernetes只会保留 ...

  3. R语言学习——向量

    以下为在RStudio中输入 #为注释符,其后内容程序不执行 > #向量是用于储存数值型.字符型或者逻辑型数据的一维数组.执行组合功能的函数c()可用来创建向量.示例如下: > a< ...

  4. 如何在已有的 Web 应用中使用 ReactJS

    原文:How to Sprinkle ReactJS into an Existing Web Application 译者:nzbin 当我们学习一项新技术,可能是一个 JavaScript 框架, ...

  5. 【alpha阶段】第一次Scrum Meeting

    每日任务内容 队员 昨日完成任务 明日要完成的任务 牛宇航 #2 数据库重构https://github.com/rRetr0Git/rateMyCourse/issues/2 #8 后端函数修正及重 ...

  6. PS制作简洁漂亮的立体抽丝文字

    一.新建一个800*600px文档,并将Background图层创建一个副本,将其命名为Background_copy. 二.双击Background_copy图层,勾选渐变叠加,并设定以下数值 勾选 ...

  7. mybatis mapper映射文件全解

    目录 select.update.delete.insert 设置参数类型以及取值 基本数据类型 对象数据类型 map数据类型 #{  } 和 ${  } 的区别 ResultMap Auto-map ...

  8. Flask 快速使用 进阶—— (2)

    案例:可配置发送信息的系统 假如我们有这样的一个系统,可以发送短息,邮件和微信,后期可能还会增加一些平台,怎么才可以做到快速切换的去使用某种功能呢,在这里我会通过在配置文件中简单的配置就可以实现 在项 ...

  9. lr 函数--lr_save_string

    lr_eval_string   返回脚本中一个参数当前的值 Returns the string argument after evaluating embedded parameters.一般都用 ...

  10. react 报错的堆栈处理

    react报错 Warning: You cannot PUSH the same path using hash history 在Link上使用replace 原文地址https://reactt ...