在参考上创建点击事件

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}

        />

但是我收到一个错误：TypeError：无法读取未定义的属性“ tl”

我很新来做出反应，裁判出于某种原因使我的生活困惑

Answer 1

当您将一个函数传递给另一个组件时，this是指调用该函数的组件（子组件），而不是“拥有”该函数的组件。您可以解决这两种方法，要么将prop包裹在箭头函数周围，以封装this父组件的值：onClick={()&nbsp;=>&nbsp;props.beginAnimation()}或将this值绑定到构造函数中的函数：this.beginAnimation&nbsp;=&nbsp;this.beginAnimation.bind(this)