对于常见的搜索需求业务场景,用户输入完成后,点击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. git、github、gitlab之间的关系

    GIt-版本控制工具:GitHub-一个网站平台,提供给用户空间存储git仓储,保存用户的一些数据文档或者代码等:GitLab - 基于Git的项目管理软件. Git分布式版本控制系统 Git是一款自 ...

  2. WEB框架-Django框架学习-预备知识

    今日份整理,终于开始整个阶段学习的后期了,今日开始学习Django的框架,加油,你是最胖的! 1.web基础知识 1.1 web应用 Web应用程序是一种可以通过Web访问的应用程序,程序的最大好处是 ...

  3. nodeJS之crypto模块md5和Hmac加密

    nodeJS之crypto模块md5和Hmac加密 原文地址:https://www.cnblogs.com/tugenhua0707/p/9128690.html 在nodejs中,可以使用cryp ...

  4. Django学习笔记之表单验证

    表单概述 HTML中的表单 单纯从前端的html来说,表单是用来提交数据给服务器的,不管后台的服务器用的是Django还是PHP语言还是其他语言.只要把input标签放在form标签中,然后再添加一个 ...

  5. SkylineGlobe TerraExplorer for Web 7.1.0版本 接口示例

    在SkylineGlobe TerraExplorer for Web 7.1.0版本(俗称H5免插件版本)中,如何使用SGWorld接口的三维视域分析方法呢? 请参考下面的示例: 通过下面的代码大家 ...

  6. zookeeper报错java.net.ConnectException: Connection refused: no further information

    zookeeper报错java.net.ConnectException: Connection refused: no further information 这是在linux 启动 https:/ ...

  7. ABP中的拦截器之ValidationInterceptor(上)

    从今天这一节起就要深入到ABP中的每一个重要的知识点来一步步进行分析,在进行介绍ABP中的拦截器之前我们先要有个概念,到底什么是拦截器,在介绍这些之前,我们必须要了解AOP编程思想,这个一般翻译是面向 ...

  8. mysql-笔记 json

    1 JSON 列不能有non-NULL 默认值 2 JSON值:数组:["abc",10,null,true,false] 可嵌套 对象:{"k1":" ...

  9. Codeforces1102F Elongated Matrix 【状压DP】

    题目分析: 这题瞎搞一个哈密尔顿路,对于起点不同的分开跑就可以过了. $O(n^3*2^n)$ #include<bits/stdc++.h> using namespace std; ; ...

  10. Django+Vue打造购物网站(七)

    个人中心功能开发 drf文档注释 http://www.django-rest-framework.org/topics/documenting-your-api/ 动态设置serializer和pe ...