使用ReactJs和react-dnd拖放可排序列表时出现问题

Question

使用ReactJs和react-dnd

我希望用户能够对表单字段进行排序（a.k.a. properties）

我设置的代码几乎与source code中卡片的simple sort demo相同。没有控制台警告或错误，我无法弄清楚为什么这不会起作用。我既不能拖也不能放弃任何东西。

它看起来像什么：

代码：

App.js

import EditForm from './Forms/EditForm.js';

var id = $('#form').data('id');
var source = `/api/forms/${id}?include=type,properties.type`;

React.render(
    <EditForm source={source} />,
    document.getElementById('form')
);

EditForm.js

import React from 'react/addons';
import update from 'react/lib/update';
import Property from './Property.js';

var EditForm = React.createClass({

    mixins: [ React.addons.LinkedStateMixin ],

    getInitialState: function() {
        return {
            id: null,
            name: null,
            slug: null,
            properties: []
        }
    },

    componentDidMount: function() {
        this.getFormFromServer();
    },

    getFormFromServer: function () {
        $.get(this.props.source, (result) => {
            if (this.isMounted()) {
                this.setState({
                    id: result.id,
                    name: result.name,
                    slug: result.slug,
                    properties: result.properties.data
                });
            }
        });
    },

    moveProperty: function(id, afterId) {
        const { properties } = this.state;

        const property = properties.filter(p => p.id === id)[0];
        const afterProperty = properties.filter(p => p.id === afterId)[0];
        const propertyIndex = properties.indexOf(property);
        const afterIndex = properties.indexOf(afterProperty);

        this.setState(update(this.state, {
            properties: {
                $splice: [
                    [propertyIndex, 1],
                    [afterIndex, 0, property]
                ]
            }
        }));
    },

    render: function() {
        const { properties } = this.state;

        var propertiesList = properties.map((property, i) => {
            return (
                <Property
                    key={property.id}
                    id={property.id}
                    type={property.type.name}
                    name={property.name}
                    moveProperty={this.moveProperty} />
            );
        });

        return (
            <div>
                <h1>Form</h1>
                <form>
                    <div className="form-group">
                        <label>Name:</label>
                        <input type="text" name="name" valueLink={this.linkState('name')} className="form-control" />
                    </div>
                    <div className="form-group">
                        <label>Properties:</label>
                        <div className="list-group properties-list">
                            {propertiesList}
                        </div>
                    </div>
                </form>
            </div>
        );
    }

});

export default EditForm;

Property.js

import React, { PropTypes } from 'react/addons';
import { DragDropMixin } from 'react-dnd';
import ItemTypes from './ItemTypes';

const dragSource = {
    beginDrag(component) {
        return {
            item: {
                id: component.props.id
            }
        };
    }
};

const dropTarget = {
    over(component, item) {
        component.props.moveProperty(item.id, component.props.id);
    }
};

var Property = React.createClass({

    mixins: [ React.addons.LinkedStateMixin, DragDropMixin ],

    propTypes: {
        id: PropTypes.any.isRequired,
        type: PropTypes.string.isRequired,
        name: PropTypes.string.isRequired,
        moveProperty: PropTypes.func.isRequired
    },

    statics: {
        configureDragDrop(register) {
            register(ItemTypes.PROPERTY, {
                dragSource,
                dropTarget
            });
        }
    },

    render: function () {
        const { type } = this.props;
        const { name } = this.props;
        const { isDragging } = this.getDragState(ItemTypes.PROPERTY);
        const opacity = isDragging ? 0 : 1;

        return (
            <a  className="list-group-item"
                {...this.dragSourceFor(ItemTypes.PROPERTY)}
                {...this.dropTargetFor(ItemTypes.PROPERTY)}>
                {type}: {name}
            </a>
        );
    }
});

export default Property;

ItemTypes.js

module.exports = {
    PROPERTY: 'property'
};

如果有人能提供帮助，我会非常感激。很遗憾我花了多少时间试图解决这个问题。

参考链接：

• My code on github
• Demo example
• Demo source on github

Answer 1

花了一天时间尝试拖放工作后我用one single line of code修复了它。

import React from 'react/addons';

如果没有它，它是如何编译和渲染的，我甚至都不知道。