Как вызвать события при падении с Dragula при падении?

Question

Я использую модуль реагировать-драгулы с реагировать. Для простоты объяснения я по сути делаю клон Трелло. Когда "AppItem/Card" перемещается из одного контейнера Dragula ("Фаза") в другой, я хочу вызвать событие, которое изменяет его "статус" в БД.

Мой вопрос заключается в том, где и как я могу вызвать события dragula.on в "drop", документы предназначены для ванильного javascript, и я не уверен, как перевести это на мой компонент React. Я пытался записывать свои события DOM в моих конструкторах, в различных компонентных методах, и не могу заставить другого работать или даже регистрировать, что событие происходит.

Вот мои компоненты, которые оборачивают контейнеры Dragula, которые визуализируются динамически

import React from 'react'
import dragula from 'react-dragula'
import Phase from './Phase.jsx'

export default class ProgressBoard extends React.Component{
constructor(props){
    super(props)
}

componentDidMount(){
  dragula(Array.from(document.getElementsByClassName('phase')))
}
componentDidUpdate(){
  dragula(Array.from(document.getElementsByClassName('phase')))
}

render(){

    return(
        <div className="progressboard-container">
  {
    this.props.phases.map((phase,i) => <Phase key={i} phase={phase} 
    applications={this.props.apps.filter(app => app.phase_id === 
    phase.id)}/>)
  }
  </div>

    )
}
}

Вот сама колонка / компонент Phase

  import React, { Component } from 'react'
  import Appitem from './AppItem.jsx'
  import {Header, Card} from 'semantic-ui-react'



export default class Phase extends Component {
    constructor(props){
       super(props)
       this.state = {}
}
render(){
    return(
        <div className='phase'>
        <div className='PhaseTitle'>
        <Header size="large">{this.props.phase.phase_label}</Header>
        </div>
        {
          this.props.applications.map((app,i) =>  <div app={app} key= . 
         {i} className="AppItem">{app.company}</div>)
        }
        </div>
    )
  }
}

Answer 1

Вы можете использовать drop обратный вызов события в API Dragula.

var drake = dragula(Array.from(document.getElementsByClassName('phase'))); drake.on('drop', (el, target) => { this.props.moveCard(el.id, target.id); });

В приведенном выше примере кода el относится к удаляемому элементу html и target относится к элементу контейнера HTML, который el падает в.

Также, this.props.moveCard это просто пример функции, которая может делать http-запрос для обновления базы данных, и вы передаете его el.id который является идентификатором удаляемого элемента и target.id который является идентификатором элемента контейнера.

Итак, в вашем phase компонент, вы можете добавить id атрибут к div элемент:

{ this.props.applications.map((app,i) => <div id={app.id} app={app} key= . {i} className="AppItem">{app.company}</div>) }

и вы также можете сделать то же самое для своего элемента контейнера, добавив к нему атрибут id.