Last active
September 17, 2015 19:13
-
-
Save seanoshea/b4e9a18fd7d9e96c0b9d to your computer and use it in GitHub Desktop.
react question
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// I'd like to make an API call via a `moveFrameCallback` function when a dnd event happens & here's the code: | |
componentDidMount: function () { | |
var container = React.findDOMNode(this), | |
drake = ReactDragula([container], { | |
moves: function (el, source, handle, sibling) { | |
// there are some items in the list of children associated with this container | |
// which should not be draggable. Identifying these by their class name feels | |
// somewhat wrong (shouldnt be reaching into the DOM to understand a child's state?). | |
return el.className !== 'draggable'; | |
}, | |
direction: 'horizontal' | |
}); | |
drake.on('drop', (el, target, source, sibling) => { | |
// how to I convert the DOM `el` here into the corresponding child item | |
this.props.moveFrameCallback(item.id); | |
}); | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Keeping the draggable state in the dom mstm. You probably also want a
data-
attribute in there with your entity's id for use in the callback.You've already chosen to leave the 'react' way of dom manipulation / event handling when you delegated them to a third party library. Trying to translate things back into react component states / identifiers is extra mental overhead that doesn't buy you anything.
fwiw, react apps need not do things 'the react way' all the time. DnD, especially, is not a thing i would want to spend much time doing 'the react way'. If you are interested, though, kentwilliam has a really clean example