我正在使用带有react的react-dragula模块。为了简单说明,我实际上是在制作trello克隆。当“ AppItem / Card”从一个Dragula容器(“ Phase”)移到另一个容器时,我想触发一个事件,该事件会更改数据库中的“状态”。
我的问题是在哪里以及如何触发'drop'上的dragula.on事件,这些文档适用于原始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>
)
}
}
您可以使用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属性。