jQuery 在 JSFiddle 中触发和开启

Question

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

因为我不能轻易地在 JSFiddle 中使用 Node.js 事件发射器，所以我尝试使用 jQuery 的 trigger 和 on 来代替。这在下面不起作用，所以我无法重现错误。

这是 JSFiddle 的 link：http://jsfiddle.net/bengrunfeld/zoyeejxr/

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

编辑：我试过将 trigger 和 on 附加到 document，但它破坏了一些 jQuery-UI 可排序插件原因。

乐码：

_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/

jQuery 在 JSFiddle 中触发和开启

jQuery Trigger and On in JSFiddle

javascript

jquery

jquery-ui

reactjs

jquery-events