在JSFiddle中的jQuery觸發器和On

Question

在下面的JSFiddle中，我嘗試使用React.js中的jQuery UI創建一個Sortable列表，以便我可以重新創建一個使用我正在使用的專有代碼生產的錯誤上。

因爲我不能輕易使用的jsfiddle Node.js的事件發射器，我試圖用jQuery的trigger和on代替。這在下面不起作用，所以我不能重新創建錯誤。

這裏是對的jsfiddle鏈接：http://jsfiddle.net/bengrunfeld/zoyeejxr/

如果我可以得到下面的代碼的工作，那麼我可以向前重建時遇到的真正錯誤移動。

編輯：我試過只是附加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

如汀Saidov在他的評論中指出，DOM還沒有當componentWillMount被稱爲渲染。您應該將事件綁定移動到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/