JSFiddle 中的 jQuery 触发器和 On

Question

在下面的 JSFiddle 中，我尝试使用 React.js 中的 jQuery UI 创建一个可排序列表，以便我可以使用我正在处理的专有代码重新创建我在生产中遇到的错误。

由于我无法在 JSFiddle 中轻松使用 Node.js 事件发射器，因此我尝试使用 jQuery 的 trigger 和 on 代替。这在下面不起作用，所以我无法重新创建错误。

这里是 JSFiddle 的链接：http://jsfiddle.net/bengrunfeld/zoyeejxr/

如果我可以让以下代码正常工作，那么我可以继续重建我遇到的 real 错误。

编辑：我尝试将trigger 和on 附加到document，但由于某种原因它破坏了jQuery-UI Sortable 插件。

乐码：

_list = {
    fruit: [
    'apple',
    'banana',
    'cherry',
    'date'
    ]
};

var Entry = React.createClass({
    render:function(){
        return (
           <div className="entry">{this.props.content}</div> 
        )
    }
});

var Shop = React.createClass({
    render:function(){
        var data = this.props.data.fruit;

        var fruitOrder = data.map(function(node, i) {
            return (
                <Entry key={i} content={node}>{node}</Entry>
            );
        });

        return (
            <div className="shop">{fruitOrder}</div>
        )
    }
});

function getList() {
  return { data: _list }
}

var Basket = React.createClass({
    getInitialState: function(){
        return getList();
    },
    componentWillMount: function(){
        $('.basket').on('sort', function(data){
            // Show that this works
            console.log('this works');

            // Swap item position in the array to recreate React
            // swapping error
            var tmp = _list.fruit[0];
            _list.fruit[0] = _list.fruit[1];
            _list.fruit[1] = tmp;
            this.setState(getList());
        });
    },
    sortIndexes: function(data) {
        console.log(data);
    },
    buttonClicked: function(e){
    },
    render: function() {
        return (
            <div className="basket">
                <p>Drag and drop the fruits</p>
                <Shop data={this.state.data} />
            </div>
            )
    }
});

React.render(
    <Basket />, 
    document.body
    );


  $('.shop').sortable({
    axis: "y",
    containment: "parent",
    tolerance: "pointer",
    revert: 150,
    start: function (event, ui) {
      ui.item.indexAtStart = ui.item.index();
    },
    stop: function (event, ui) {
      var data = {
        indexStart: ui.item.indexAtStart,
        indexStop: ui.item.index(),
      };
      $('.basket').trigger('sort');
    },
  });

Answer 1

正如 Olim Saidov 在他的评论中指出的那样，当调用 componentWillMount 时，DOM 尚未呈现。您应该将事件绑定移至componentDidMount。

您的代码中的另一个问题是您需要在回调中将this 绑定到jQuery 的on。

尝试用此代码替换您的componentWillMount：

componentDidMount: function(){
    var _this = this;
    $('.basket').on('sort', function(data){
        console.log('this works');
        var tmp = _list.fruit[0];
        _list.fruit[0] = _list.fruit[1];
        _list.fruit[1] = tmp;
        _this.setState(getList());
    });
},

http://jsfiddle.net/zoyeejxr/16/