2

我将 react-dragula 模块与 react 一起使用。出于简单解释的目的，我实际上是在制作一个 trello 克隆。当“AppItem/Card”从一个 Dragula 容器（“阶段”）移动到另一个时，我想触发一个事件来改变它在数据库中的“状态”。

我的问题是我在哪里以及如何在“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>

    )
}
}

这是列/“阶段”组件本身

  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>
    )
  }
}
4

1 回答 1

1

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

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的 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 属性。

于 2019-12-07T21:32:13.893 回答