Question

我在gsap reactjs使用ES6可拖动，我在反应组件componentDidUpdate生命周期方法中创建了这样的新拖拽

import React, { Component } from 'react'
import Draggable from 'gsap/Draggable'

class DraggableContainer extends Component {

    render(){
        ...
    }
    componentDidUpdate(){
        const draggable = Draggable.create('.box', {
            onPress: ()=>{
                // currentElement suppost to contain dom element of clicked, but its undefined because 'this' is 'DraggableContainer'
                const currentElement = this.target

            }   
        })
    }
}

在onPress this.target的方法体内，应该给出当前元素，但是未定义，this是错误的上下文。

如何在此方法中访问当前的元素？

Answer 1

您正在使用arrow function，它将自动bind将调用该方法的object的上下文。要访问目标元素，请使用event object。

在JavaScript中，称之为的东西是＆＃34;拥有的对象＆＃34;该 JavaScript代码。当在函数中使用时，它的值是＆＃34;拥有的对象＆＃34;功能。

像这样写它来访问目标元素：

const draggable = Dragable.create('.box', {
   ...,
   onPress:(e) => {
     //now this.target is wrong
     const el = e.target;
   }
})

查看此答案，详细了解 this keyword 。

GSAP Draggable与反应ES6实际这一点

1 个答案: