react 监听 移动端 手机键盘 enter 事件

处理方法:

(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
})
}

.

上一篇:关系数据库数据与hadoop数据进行转换的工具 - Sqoop


下一篇:IIS配置支持跨域请求