时间戳

首页 > 解决方案 > 从交互 js "interact('.dropzone').dropzone 访问道具

reactjs - 从交互 js "interact('.dropzone').dropzone 访问道具

问题描述

我尝试访问 ondrop 函数中的道具（可能还有其他人），但我无法从那里访问道具。这是代码

'''interact('.dropzone').dropzone({ // 在 dropzone 重叠中接受的可拖动的最小百分比：1,

// listen for drop related events:

ondropactivate: function (event) {
    // add active dropzone feedback
    event.target.classList.add('drop-active')
},
ondragenter: function (event) {
    var draggableElement = event.relatedTarget
    var dropzoneElement = event.target

    // feedback the possibility of a drop
    dropzoneElement.classList.add('drop-target')
    draggableElement.classList.add('can-drop')
},
ondragleave: function (event) {
    event.target.classList.remove('drop-target')
    event.relatedTarget.classList.remove('can-drop')
},
ondrop: function (event) {
    //TODO: rerender widget dragables, save position into store
    let availableOptions = JSON.parse(event.dragEvent.currentTarget.dataset.options).avalibaleOptions
    for( let i=0 ; i < availableOptions ; i++ ) {
        this.props.change(availableOptions);
    }
    console.log("position: ", event.dragEvent.rect)
    console.log("welche Daten sind enthalten?", JSON.parse(event.dragEvent.currentTarget.dataset.options) )
    //löschen und neu erstellen? in den state schreiben reicht? ...
},
ondropdeactivate: function (event) {
    // remove active dropzone feedback
    event.target.classList.remove('drop-active')
    event.target.classList.remove('drop-target')
}

})''' this.props.change(availableOptions) 是一个reducer。它的意思是根据数据和div的坐标来改变store。

我还没有找到任何线索如何解决它。

标签： reactjsreact-redux

解决方案

经过一番尝试，我只是导入了 store 并直接使用了 store.dispatch() ...

推荐阅读