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

.

转载于:https://www.cnblogs.com/crazycode2/p/9292729.html