Browse Source

more reliable way to get the DOM Node

with React v0.14 this.refs.*.getDOMNode() is deprecated,
we have to use this.refs.* instead, to reference the DOM Node.

this is a implementation, that is backward compatible

* misspelled ref in README fixed
* fixed Demo of forceFallback
pull/572/head
ChiefORZ 9 years ago
parent
commit
fa33718d92
  1. 4
      README.md
  2. 11
      react-sortable-mixin.js

4
README.md

@ -287,7 +287,7 @@ This gives us the possiblity to test the behaviour for older Browsers even in ne
On top of that, the Fallback always generates a copy of that DOM Element and appends the class `fallbackClass` definied in the options. This behaviour controls the look of this 'dragged' Element. On top of that, the Fallback always generates a copy of that DOM Element and appends the class `fallbackClass` definied in the options. This behaviour controls the look of this 'dragged' Element.
Demo: http://jsbin.com/xinuyenabi/edit?html,css,js,output Demo: http://jsbin.com/pucurizace/edit?html,css,js,output
--- ---
@ -410,7 +410,7 @@ var AllUsers = React.createClass({
render: function() { render: function() {
return ( return (
<h1>Users</h1> <h1>Users</h1>
<ul ref="users">{ <ul ref="user">{
this.state.users.map(function (text) { this.state.users.map(function (text) {
return <li>{text}</li> return <li>{text}</li>
}) })

11
react-sortable-mixin.js vendored

@ -35,11 +35,7 @@
onRemove: 'handleRemove', onRemove: 'handleRemove',
onSort: 'handleSort', onSort: 'handleSort',
onFilter: 'handleFilter', onFilter: 'handleFilter',
onMove: 'handleMove', onMove: 'handleMove'
getContainer: function(component){
/** @namespace this.refs — http://facebook.github.io/react/docs/more-about-refs.html */
return (component.refs[options.ref] || component).getDOMNode()
}
}; };
@ -85,7 +81,7 @@
componentDidMount: function () { componentDidMount: function () {
var options = _extend(_extend({}, _defaultOptions), this.sortableOptions || {}), var DOMNode, options = _extend(_extend({}, _defaultOptions), this.sortableOptions || {}),
copyOptions = _extend({}, options), copyOptions = _extend({}, options),
emitEvent = function (/** string */type, /** Event */evt) { emitEvent = function (/** string */type, /** Event */evt) {
@ -134,9 +130,10 @@
}.bind(this); }.bind(this);
}, this); }, this);
DOMNode = this.getDOMNode() ? (this.refs[options.ref] || this).getDOMNode() : this.refs[options.ref] || this;
/** @namespace this.refs — http://facebook.github.io/react/docs/more-about-refs.html */ /** @namespace this.refs — http://facebook.github.io/react/docs/more-about-refs.html */
this._sortableInstance = Sortable.create(copyOptions.getContainer(this), copyOptions); this._sortableInstance = Sortable.create(DOMNode, copyOptions);
}, },
componentWillReceiveProps: function (nextProps) { componentWillReceiveProps: function (nextProps) {

Loading…
Cancel
Save