最新消息:20181230 VPS服务器已从Linode换到腾讯云香港,主题仍用朋友推荐的大前端D8

【已解决】ReactJS中onTouchStart和onTouchEnd事件中如何传递特定数据作为参数

ReactJS crifan 1760浏览 0评论

折腾:

【已解决】Reactjs中尝试使用touch事件实现长按效果

期间,对于代码:

  onItemTouchStart(e){
    console.log("onItemTouchStart");
    console.log(e);
    this.longPressItemTimeout = setTimeout(this.onLongPressItem, 2000);  //长按时间超过800ms,则执行传入的方法
    console.log(this.longPressItemTimeout);
  }
  onItemTouchEnd(e){
    console.log("onItemTouchEnd");
    console.log(e);
    clearTimeout(this.longPressItemTimeout);
  }
  onLongPressItem(){
    console.log("onLongPressItem");
    console.log(this.longPressItemTimeout);
    // clearTimeout(this.longPressItemTimeout);
  }
  renderPending() {
    const {
      activeItem,
      pendingList
    } = this.state;
    return (
      <div>
        <div class={style.nn_list_tit}>
          <a
            onClick={this.sortByShed}
            class={this.sortType === ORDER.BY_SHED ? style.px_c : ”}
          >按牛舍排序</a>
          <a
            onClick={this.sortByTime}
            class={this.sortType === ORDER.BY_TIME ? style.px_c : ”}
          >按时间排序 <i class={style.zx} /></a>
        </div>
        <ul class={style.nn_a_list}>
          {
            pendingList.map(item => {
              const fn = () => this.setActiveItem(item);
              return (
                <EstrusPendingItem
                  currentItem={item}
                  active={activeItem === item}
                  show={fn}
                  hide={this.hideActiveItem}
                  thisObj={this}
                />
              );
            })
          }
        </ul>
      </div>
    );
  }
function EstrusPendingItem({ currentItem, active, show, hide, thisObj }) {
  const {
    previous_date,
    current_date,
    cow_code,
    cowshed_name
  } = currentItem;
  return (
      <div class={style.item}
        onTouchStart={thisObj.onItemTouchStart}
        onTouchEnd={thisObj.onItemTouchEnd}
      >
        <div>
          <p>牛号:<span>{cow_code}</span></p>
          <p>牛舍:{cowshed_name}</p>
        </div>
        <div>
          <div>本次预警:{formatDate(current_date)}</div>
          <div>上次预警:{formatDate(previous_date)}</div>
        </div>
        <a onClick={show}>处理</a>
        {/*<dl class={active ? style.dl_active : ”} >
          <dd>
            <Link href="/"><span>牛只活动量</span></Link>
            <span onClick={hide}>取消</span>
          </dd>
        </dl>*/}
      </div>
  );
}

已经可以实现了长按的检测了:

但是想要:

对于长按某行时,把对应的EstrusPendingItem中的currentItem这个数据,作为参数,传递到:

onTouchStart和onTouchEnd中,以便于:

实现检测到当前哪行,然后显示对应的弹框

此处,已经知道:

TouchEvent中,是有srcElement和target的

但是没有上面要的特定的参数

react js pass parameter to eventhandler

javascript – React js onClick can’t pass value to method – Stack Overflow

然后用代码:

  // onItemTouchStart(e){
  //   console.log("onItemTouchStart");
  //   console.log(e);
  onItemTouchStart(currentItem){
    console.log("onItemTouchStart");
    console.log(currentItem);
    this.longPressItemTimeout = setTimeout(this.onLongPressItem, 2000);  //长按时间超过800ms,则执行传入的方法
    console.log(this.longPressItemTimeout);
  }
  // onItemTouchEnd(e){
  //   console.log("onItemTouchEnd");
  //   console.log(e);
  onItemTouchEnd(currentItem){
    console.log("onItemTouchEnd");
    console.log(currentItem);
    clearTimeout(this.longPressItemTimeout);
  }
function EstrusPendingItem({ currentItem, active, show, hide, thisObj }) {
  const {
    previous_date,
    current_date,
    cow_code,
    cowshed_name
  } = currentItem;
  return (
      <div class={style.item}
        onTouchStart={() => thisObj.onItemTouchStart(currentItem)}
        onTouchEnd={() => thisObj.onItemTouchEnd(currentItem)}
      >

果然可以收到参数了:

【总结】

把:

      <div class={style.item}
        onTouchStart={thisObj.onItemTouchStart}
        onTouchEnd={thisObj.onItemTouchEnd}
      >

改为:

function EstrusPendingItem({ currentItem, active, show, hide, thisObj }) {
  。。。
  return (
      <div class={style.item}
        onTouchStart={() => thisObj.onItemTouchStart(currentItem)}
        onTouchEnd={() => thisObj.onItemTouchEnd(currentItem)}
      >

即可传递参数。 

转载请注明:在路上 » 【已解决】ReactJS中onTouchStart和onTouchEnd事件中如何传递特定数据作为参数

发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
61 queries in 0.061 seconds, using 9.44MB memory