Создание события нажатия на ссылку

Question

https://codesandbox.io/s/k0q179orqv

Что я пытаюсь сделать:
Создать событие onclick и обработчик, чтобы просто запустить анимацию gsap.Другими словами, все, что будет делать обработчик, это:

beginAnimation (){
  this.tl.play()
}

Что я пытался сделать: я начал с добавления ссылки в About.js, и он перенаправляется в Card.js ина стрелке я хочу иметь возможность нажать, чтобы начать анимацию.Ссылки передаются в объекте, и к ним обращаются следующим образом: «ref.ref2»

Я пытался сделать что-то вроде этого:

Создать метод в About.js:

  beginAnimation() {
    this.tl.play();
  }

и передайте его представляемым картам:

 createCards(card, i) {
    return (
      <Card
        id={i}
        key={i}
        card={card}
        info={this.state.aboutCards}
        ref={{ ref1: this["card" + i], ref2: this.button }}
        beginAnimation={this.beginAnimation}
      />
    );
  }
}

Затем в Card.js:

      <div className="prevnext">
        <button
          className="pn-btn"
          id="prev"
          ref={ref.ref2}
          onClick={props.beginAnimation}
        />

, но я получаю сообщение об ошибке: Ошибка типа: Ошибка чтениясвойство 'tl' не определено

Я очень новичок, чтобы отреагировать, и реферы почему-то путают мою жизнь

Answer 1

Когда вы передаете функцию другому компоненту, this относится к компоненту, который ее вызвал (дочерний), а не к компоненту, который «владеет» этой функцией.

Вы можете исправить это двумя способами, либо обернуть свою опору вокруг функции стрелки, чтобы инкапсулировать значение this родительского компонента:

onClick={() => props.beginAnimation()}

Или связать значение this с функцией в конструкторе:

this.beginAnimation = this.beginAnimation.bind(this)