react 监听 移动端 手机键盘 enter 事件
2018-07-11 21:20
696 查看
处理方法:
(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 }) }
.
相关文章推荐
- [mobile]监听手机mobile上面软键盘的回车[enter]事件
- ajax提交如何监听“enter”“手机键盘确定”事件
- React Native - Keyboard API使用详解(监听处理键盘事件)
- 移动端监听手机键盘弹起和关闭(Ionic+Cordova)
- Vue.js移动端左滑demo和JS事件监听手机屏幕触摸事件 Touch
- JS 键盘监听事件 enter 13
- 混合开发中手机键盘监听事件的问题
- 微信浏览器返回刷新,监听微信浏览器返回事件,网页防复制,移动端禁止图片长按和vivo手机点击img标签放大图片
- vue 监听键盘回车事件详解 @keyup.enter || @keyup.enter.native
- vuejs监听苹果iphone手机键盘事件
- react addEventListener监听键盘事件实现扫码枪输入
- js监听Enter事件的触发进行查找
- 移动端touch触屏滑动事件、滑动触屏事件监听!
- Android学习札记4:PopupWindow在设置setFocusable后监听返回键盘事件
- 键盘enter事件一个页面绑定多次
- DOM事件监听:键盘和鼠标
- 键盘监听事件
- jquery 按键盘上的enter事件
- JS键盘监听事件的键盘码
- javascript监听键盘事件的解释