react 监听 移动端 手机键盘 enter 事件
2023-09-11 14:15:30 时间
处理方法:
(1)html书写
form标签中去掉action参数,定义onSubmit方法,如下所示:
/** * 搜索框 组件 */ import React,{PureComponent} from 'react' import Styles from './index.less' import buttonimg from '../../assets/search_icon.png' class SearchBar extends PureComponent{ state = { searchkey: '' // 输入框的值 }; // 获取输入框的值 getSearchData(val){ this.setState({ searchkey: val }); } render(){ const {text} = this.props; const bg = { backgroundImage: `url(${buttonimg})`, } return ( <div className={Styles.custom_search}> <form onSubmit={(e) => this.props.getSearchTxt(e,this.state.searchkey)} className={Styles.form}> <input type="search" className={Styles.custom_search_input} placeholder={text} value={this.state.searchkey} onChange={(e) => this.getSearchData(e.target.value)} /> <button className={Styles.custom_search_button} style={bg}>搜索</button> </form> </div> ) } } export default SearchBar;
(2)事件处理
关键的是阻止掉页面默认提交:
// 获取搜索框输入内容 getSearchTxt(e,val){ e.preventDefault();//阻止页面提交刷新 // 请求安排人员数据 this.props.dispatch({ type:'getWorkArrangePersonsList', param: val }) }
.
相关文章
- Flutter RichText 富文本标签样式 局部文字点击事件
- Cocos2d-JS键盘事件
- RecyclerView onItemClick button和布局都有单击事件时的处理方式
- window onload 与 img onload事件
- Android Button响应事件两种实现方法及优劣比较
- 《基于事件流的高效模式匹配》论文中文版
- 网络安全系列-I: 基本概念之事件型漏洞、通用型漏洞、渗透测试
- React vscode 创建 react 项目流程
- react 事件绑定的2种常用方式
- C# 事件
- 委托、lambda表达式和事件(二)
- 第十五节:事件实验
- js中的事件委托(事件代理)详解
- 历史事件与历史人物
- React高级篇(一)从Flux到Redux,react-redux
- react项目Bug:组件销毁清除监听(Can't perform a React state update on an unmounted component.)
- QThread::wait(),一直以来我以为它阻塞的是QThread对象,可是我现在明白,原来阻塞的是这个对象所在的线程(通常是主线程)——所有事情源于 QThread 的事件循环——如果使用继承QThread这一方法,QThread::quit()没有效果,因为这个线程根本就不需要事件循环
- React魔法堂:echarts-for-react源码略读
- 项目经理问:我怎么有做不完的事情–事件篮方法
- Node.js EventEmmitter事件监听器