对于常见的搜索需求业务场景,用户输入完成后,点击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. pytorch Debug —交互式调试工具Pdb (ipdb是增强版的pdb)-1-在pytorch中使用

    参考深度学习框架pytorch:入门和实践一书第六章 以深度学习框架PyTorch一书的学习-第六章-实战指南为前提 在pytorch中Debug pytorch作为一个动态图框架,与ipdb结合能为 ...

  2. Spring Security(二十九):9.4.1 ExceptionTranslationFilter

    ExceptionTranslationFilter is a Spring Security filter that has responsibility for detecting any Spr ...

  3. c++ cout、cin、endl

    cout是标准输出流对象,<<是输出操作符:cin是标准输入流对象,>>是输入操作符:endl是换行符操作符.他们都属于C++标准库,所以都在std的名字空间里.所以要在开头写 ...

  4. java获取真实的IP地址工具类

    在实际项目中,有调用微信支付完成支付功能,在微信支付的请求参数中需要传递一个本机的ip地址,java代码运行环境目前为windows10以及centos7. 以下为获取ip地址工具类: package ...

  5. vc图像合成

    本程序下载地址: 上一篇讲述了tiff格式图片拆分成多张图片, 这篇博客讲述如何把多张任意格式的图片合成为一张图片. 图像合成仍然需要借助Cximage图像库,合成函数为Mixfrom, 函数原型为: ...

  6. 广师大学习笔记之文本统计(jieba库好玩的词云)

    1.jieba库,介绍如下: (1) jieba 库的分词原理是利用一个中文词库,将待分词的内容与分词词库进行比对,通过图结构和动态规划方法找到最大概率的词组:除此之外,jieba 库还提供了增加自定 ...

  7. 图表插件Highcharts的动态化赋值,实现图表数据的动态化设置显示

    在很早之前就介绍过图表插件Highcharts的使用了,在2014年的随笔<基于MVC4+EasyUI的Web开发框架经验总结(4)--使用图表控件Highcharts>,这里基本上都介绍 ...

  8. 程序员买房指南——LZ的三次买房和一次卖房经历

    引言 买房,一直是程序员群体绕不开的一个话题,尤其是到了一定年纪和人生阶段以后,买房这件事会变得越来越迫切. 为什么LZ一上来就说,买房是程序员绕不开的一个话题? 其实原因很简单,由于程序员这个职业的 ...

  9. 数据标记系列——标记工具Imagtagger

    https://github.com/bit-bots/imagetagger 待有空说一说!

  10. Monkey简介

    Monkey简介 在Android的官方自动化测试领域有一只非常著名的“猴子”叫Monkey,这只“猴子”一旦启动,就会让被测的Android应用程序像猴子一样活蹦乱跳,到处乱跑.人们常用这只“猴子” ...