Question

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

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

以下是JSFiddle的链接：http://jsfiddle.net/bengrunfeld/zoyeejxr/

如果我能够使用以下代码，那么我可以继续重新创建我所拥有的真实错误。

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

Le code：

_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＆＃39; 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/

JSFiddle中的jQuery Trigger和On

1 个答案: