Question

我想在array.map函数中的onTouchStart，Move和End到img标签上添加事件侦听器，因此它只能捕获一个事件侦听器（onTouchStart），但是如果我将此侦听器设置为div且class =“ header- “添加了英雄”这3个侦听器全部正常工作，我了解了将“ this”绑定到array.map并仅在onTouchStart上捕获它的情况，我将不胜感激。

{this.props.addedHeroes.map( function(el) {
            return (<a name={el.link} key={uniqueId()} className="heroes__link">
              <div className="hero"> {console.log(' map this : ', this === that)}
                {
                  <img className="hero__image"
                    onTouchStart={this.onTouchStart}
                    onTouchMove={this.handleMove}
                    onTouchEnd={this.onTouchEnd}
                    src={el.image}
                  />
                }
              </div>
            </a>);
          }, this )}

完整代码：

import React from "react";
import uniqueId from "lodash/uniqueId";
import HeroCounter from "../../images/HeroCounter.svg";

class HeaderAddedHeroes extends React.Component {
  state = {
    heroes: [1, 2, 3, 4],
    showCloseButton: 0
  };
  constructor(props) {
    super(props);

    this.onTouchStart = this.onTouchStart.bind(this);
    this.onTouchEnd = this.onTouchEnd.bind(this);
    this.handleMove = this.handleMove.bind(this);
  }

  handleMove() {
    console.log('moved');
    this.setState({ showCloseButton: 1 })
  }
  onTouchStart() {
    console.log('started');
    this.setState({ showCloseButton: 2 })
  }
  onTouchEnd() {
    console.log('ended');
    this.setState({ showCloseButton: 3 })
  }

  render() { var that = this;
    return (
      <header className="header-added-heroes"> { console.log(' this : ', that)}
        <div className="header-added-heroes" 
             onTouchMove={this.handleMove} 
             onTouchStart={ this.onTouchStart } 
             onTouchEnd={this.onTouchEnd}>
                  { this.state.showCloseButton }
        </div>
        <div className="heroes">
          {this.props.addedHeroes.map( function(el) {
            return (<a name={el.link} key={uniqueId()} className="heroes__link">
              <div className="hero"> {console.log(' map this : ', this === that)}
                {
                  <img className="hero__image"
                    onTouchStart={this.onTouchStart}
                    onTouchMove={this.handleMove}
                    onTouchEnd={this.onTouchEnd}
                    src={el.image}
                  />
                }
              </div>
            </a>);
          }, this )} 
      </header>
    );
  }
}

Answer 1

您始终可以使用箭头功能。

解决方案是：删除“ uniqueId（）”

{this.props.addedHeroes.map((el, i) => {
            return (<a name={el.link} key={i} className="heroes__link">
              <div className="hero">
                  <img className="hero__image"
                    onTouchStart={this.onTouchStart}
                    onTouchMove={this.handleMove}
                    onTouchEnd={this.onTouchEnd}
                    src={el.image}
                  />
              </div>
            </a>);
          }
)}

并非所有触摸事件都在array.map中触发

1 个答案: