diff --git a/src/index.jsx b/src/index.jsx index 20690f9..a64b6ae 100644 --- a/src/index.jsx +++ b/src/index.jsx @@ -41,7 +41,11 @@ const extend = (target, ...sources) => { }; const SortableMixin = (options = defaultOptions) => (Component) => class extends React.Component { - sortableInstance = null; + + state = { + sortableInstance: null + }; + sortableOptions = extend({}, defaultOptions, options); componentDidMount() { @@ -49,7 +53,7 @@ const SortableMixin = (options = defaultOptions) => (Component) => class extends const emitEvent = (type, evt) => { const methodName = this.sortableOptions[type]; const method = sortableComponent[methodName]; - method && method.call(sortableComponent, evt, this.sortableInstance); + method && method.call(sortableComponent, evt, this.state.sortableInstance); }; let copyOptions = extend({}, this.sortableOptions); @@ -133,18 +137,19 @@ const SortableMixin = (options = defaultOptions) => (Component) => class extends initSortable(sortableComponent) { this.destroySortable(); const domNode = ReactDOM.findDOMNode(sortableComponent.refs[this.sortableOptions.ref] || sortableComponent); - this.sortableInstance = Sortable.create(domNode, this.populatedOptions); + const sortableInstance = Sortable.create(domNode, this.populatedOptions); + this.setState({sortableInstance}); } destroySortable() { - if (this.sortableInstance) { - this.sortableInstance.destroy(); - this.sortableInstance = null; + if (this.state.sortableInstance) { + this.state.sortableInstance.destroy(); + this.setState({sortableInstance: null}); } } render() { return ( - + ); } };