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();//阻止页面提交刷新}

  

原文地址:https://www.cnblogs.com/sunLemon/p/9089911.html

时间: 2024-10-08 19:48:51

react中键盘enter事件处理的相关文章

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

17.2. DOM2中的高级事件处理(Advanced Event Handling with DOM Level 2)        译自:JavaScript: The Definitive Guide, 5th Edition ----By David Flanagan         迄今为止,在本章中出现的事件处理技术都是DOM0级的一部分,所有支持JavaScript的浏览器都支持DOM0的API.DOM2定义了高级的事件处理API,和DOM0的API相比,有着令人瞩目的不同(而且功

键盘enter事件一个页面绑定多次

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-

vue.js 键盘enter事件的使用

在监听键盘事件时,我们经常需要检查常见的键值.Vue 允许为 v-on 在监听键盘事件时添加按键修饰符: <!-- 只有在 `keyCode` 是 13 时调用 `vm.submit()` --><input v-on:keyup.13="submit"> 记住所有的 keyCode 比较困难,所以 Vue 为最常用的按键提供了别名: <!-- 同上 --><input v-on:keyup.enter="submit"&g

React 中的函数式思想

函数式编程简要概念 函数式编程中一个核心概念之一就是纯函数,如果一个函数满足一下几个条件,就可以认为这个函数是纯函数了: 它是一个函数(废话): 当给定相同的输入(函数的参数)的时候,总是有相同的输出(返回值): 没有副作用: 不依赖于函数外部状态. 当一个函数满足以上条件的时候,就可以认为这个函数是纯函数了.举个栗子: // 非纯函数 let payload = 0; function addOne(number) { ++payload; return number + payload; }

React 中阻止事件冒泡的问题

在正式开始前,先来看看 JS 中事件的触发与事件处理器的执行. JS 中事件的监听与处理 事件捕获与冒泡 DOM 事件会先后经历 捕获 与 冒泡 两个阶段.捕获即事件沿着 DOM 树由上往下传递,到达触发事件的元素后,开始由下往上冒泡. IE9 及之前的版本只支持冒泡 | A -----------------|--|----------------- | Parent | | | | -------------|--|----------- | | |Children V | | | | --

[译] 如何在React中写出更优秀的代码

目录 我们先来看 Linting 利用组件模块性.复用性和组合性 propTypes 和 defaultProps 知道何时创建新组件 组件 vs 纯组件 vs 无状态函数组件 无状态函数组件 纯组件 使用 React 开发工具 使用内联条件语句 尽可能使用代码片段库 React 本质 - 学习 React 是如何工作的 快速回顾 在React中写出更好代码的9条建议:学习关于 Linting, propTypes, PureComponent 等. Rajat S · 2018 年 4 月 1

React中setState 什么时候是同步的,什么时候是异步的?

class Example extends React.Component { constructor() { super(); this.state = { val: 0 }; } componentDidMount() { this.setState({val: this.state.val + 1}); console.log(this.state.val); // 第 1 次 log this.setState({val: this.state.val + 1}); console.lo

React中事件的处理

React 中使用 onClick 类似的写法来监听事件,注意 this 绑定问题 React 里严格遵循单项数据流,没有数据双向绑定,所以要处理两件事,第一是元素本身值的赋值,第二是值改变以后的事件,例如输入框需要设置 value 和 onChange . 1.在 src -> components 文件夹中,再新建 CartSample.js ,具体代码如下: import React, { Component } from 'react'; export default class Car

React中setState同步更新策略

本文和大家分享的主要是React中setState同步更新相关内容,希望对大家学习React有所帮助. 为了提高性能React将setState设置为批次更新,即是异步操作函数,并不能以顺序控制流的方式设置某些事件,我们也不能依赖于 this.state 来计算未来状态.典型的譬如我们希望在从服务端抓取数据并且渲染到界面之后,再隐藏加载进度条或者外部加载提示: componentDidMount() { fetch('https://example.com') .then((res) => re