zoukankan      html  css  js  c++  java
  • 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();//阻止页面提交刷新<br>}

    连接:

    http://www.cnblogs.com/sunLemon/p/9089911.html

    https://www.imooc.com/learn/1012

  • 相关阅读:
    练字的感悟
    关于简单
    全都是泡沫
    跟着电影环游世界
    12.8《印度之行》
    11.21派生类对基类的访问
    Linux,begin
    如何利用google
    回调函数
    原型对象
  • 原文地址:https://www.cnblogs.com/piaobodewu/p/10086210.html
Copyright © 2011-2022 走看看