Не все сенсорные события запускаются в массиве. Карта реагирует - PullRequest
Новая
       70

Не все сенсорные события запускаются в массиве. Карта реагирует

1 голос
/ 03 апреля 2019

Я хочу добавить прослушиватели событий onTouchStart, Move и End к тегу img в функции array.map, в результате он перехватывает только один прослушиватель событий (onTouchStart), но если я установлю для этих слушателей div с class = "header- add-heroes "работают все 3 слушателя, я читал о привязке 'this' к array.map и его улове только на TouchStart, буду благодарен за любую информацию по этому вопросу. 

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

1 Ответ

0 голосов
/ 03 апреля 2019

Вы всегда можете использовать функцию стрелки.

Решение было: удалить ‘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>);
          }
)}
...