Question

我正在使用react-dragula模块进行反应。出于简单的解释目的，我实际上是在创建一个trello克隆。当'AppItem / Card'从一个dragula容器（'Phase'）移动到另一个时，我想触发一个事件，在db中更改它的'status'。

我的问题是在哪里以及如何触发'drop'上的dragula.on事件，文档是针对vanilla 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

您可以使用Dragula API下的drop事件回调。

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

在上面的代码示例中，el指的是被放置的html元素，target指的是被el放置到的html容器元素。

此外，this.props.moveCard只是一个示例函数，可以发出http请求更新数据库，然后将其传递给el.id，这是要删除的元素的ID，target.id这是容器元素的ID。

因此，在您的phase组件中，您可以向id元素添加一个div属性：

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

，您还可以对容器元素执行相同的操作，为其添加id属性。

如何在拖放时使用Dragula触发事件？

1 个答案: