对于常见的搜索需求业务场景,用户输入完成后,点击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. Spring-扫描注解原理,注解自动扫描原理分析

    注解自动扫描原理分析 在spring的配置文件中加入如下代码,spring便开启了自动扫描,那么它的底层到底是如何实现的呢? <context:component-scan base-packa ...

  2. js如何调用php文件内显示的数值到html?

    index.html <script type="text/javascript" src="https://cdn.bootcss.com/jquery/1.9. ...

  3. 2-STM32带你入坑系列(点亮一个灯--Keil)

    1-STM32带你入坑系列(STM32介绍) 首先是安装软件 这一节用Kei来实现,需要安装MDK4.7这个软件,怎么安装,自己百度哈.都学习32的人了,不会连个软件都不会安装吧....还是那句话 没 ...

  4. 控制结构(11): Continuation passing style(CPS)

    // 上一篇:控制结构(10)指令序列(opcode) [注释]: 这个笔记系列需要告一个段落了,收尾部分整理下几个时髦(The New Old Things)结构. 后面打算开一个算法方面的,重新学 ...

  5. 【问题解决方案】ImportError: No module named 'openpyxl'/‘xlrd’

    背景: 在jupyter notebook to_excle: 运行将dataframe保存为excel文件 df.to_excel('dataframe.xlsx') 时报错openpyxl rea ...

  6. lombok的简单使用小结

    1.idea安装lombok插件 关于lombok如何在idea中使用,下面这篇博客写的很到位,并且提供了本地安装对应idea版本的lombok插件的地址.如果无法通过idea直接安装lombok,可 ...

  7. vue中使用Base64和md5和rsa

    https://blog.csdn.net/benben513624/article/details/88113459(copy) https://www.cnblogs.com/myfate/p/1 ...

  8. Maven 建立的项目resource对应的实际位置

        如图,springmvc-servlet.xml在项目中实际位置为: WEB-INF/classes/config/springmvc/springmvc-servlet.xml   在配置项 ...

  9. Linux--前后端分离部署

    项目部署 (vue + nginx + uwsgi + django + mysql + redis) 一 . 前端部署 1. 下载vue代码,解压缩 wget https://files.cnblo ...

  10. 常用的flex布局

    演示地址:https://xibushijie.github.io/static/flex.html