ReactDnD排序元素在拖動時不更新

Question

你好，我正在關注這個code從這個example做出一個類似的組件。我的組件按照我的預期工作（在拖放時排序正確），但是當我拖動卡片時，不透明度0必須跟隨拖動元素才能「感覺」，就像在ReactDnD示例中一樣。

見我work

和我的代碼

var React = require('react'); 
var ReactDOM = require('react-dom'); 
var ReactDnDBackend = require('react-dnd-html5-backend'); 
var DragDropContext = require('react-dnd').DragDropContext; 
var DragSource = require('react-dnd').DragSource; 
var DropTarget = require('react-dnd').DropTarget; 

var Card = React.createClass({ 
    render: function() { 
     var connectDragSource = this.props.connectDragSource; 
     var isDragging = this.props.isDragging; 
     var connectDropTarget = this.props.connectDropTarget; 

     return connectDragSource(connectDropTarget(
      <div style={{ 
       marginBottom: '5px', 
       background: '#fff', 
       border: '1px dashed #ccc', 
       padding: '10px 16px', 
       opacity: isDragging ? 0.5 : 1, 
      }}> 
       {this.props.name} 
      </div> 
     )); 
    } 
}); 

var Source = { 
    beginDrag: function (props) { 
     return { 
      name: props.name, 
      index: props.index 
     }; 
    } 
}; 

Card = DragSource('CARD', Source, function (connect, monitor) { 
    return { 
     connectDragSource: connect.dragSource(), 
     isDragging: monitor.isDragging() 
    }; 
})(Card); 


var Target = { 
    hover: function (props, monitor, component) { 
     var dragIndex = monitor.getItem().index, 
      hoverIndex = props.index; 
     if (dragIndex === hoverIndex) { 
      return; 
     } 

     var hoverBoundingRect = ReactDOM.findDOMNode(component).getBoundingClientRect(), 
      hoverMiddleY = (hoverBoundingRect.bottom - hoverBoundingRect.top)/2, 
      clientOffset = monitor.getClientOffset(), 
      hoverClientY = clientOffset.y - hoverBoundingRect.top; 


     if (dragIndex < hoverIndex && hoverClientY < hoverMiddleY) { 
      return; 
     } 

     if (dragIndex > hoverIndex && hoverClientY > hoverMiddleY) { 
      return; 
     } 

     props.moveItem(dragIndex, hoverIndex); 

     monitor.getItem().index = hoverIndex; 
    } 
}; 

Card = DropTarget('CARD', Target, function (connect) { 
    return { 
     connectDropTarget: connect.dropTarget() 
    }; 
})(Card); 

var Container = React.createClass({ 
    getInitialState: function() { 
     return { 
      items: [ 
       {id: 1, name: 'Item 1', order: 0, bg: '#b5b5b5'}, 
       {id: 4, name: 'Item 4', order: 1, bg: 'red'}, 
       {id: 2, name: 'Item 2', order: 2, bg: 'blue'}, 
       {id: 3, name: 'Item 3', order: 3, bg: 'green'}, 

       {id: 5, name: 'Item 5', order: 4, bg: '#b5b5b5'}, 
       {id: 8, name: 'Item 8', order: 5, bg: 'red'}, 
       {id: 6, name: 'Item 6', order: 6, bg: 'blue'}, 
       {id: 7, name: 'Item 7', order: 7, bg: 'green'}, 
      ] 
     }; 
    }, 
    moveItem(dragIndex, hoverIndex) { 
     var items = this.state.items.slice(0), 
      dragItem = items[dragIndex]; 

     items.splice(dragIndex, 1); 
     items.splice(hoverIndex, 0, dragItem); 

     this.setState({ 
      items: items 
     }); 
    }, 
    render: function() { 
     var self = this; 

     return (
      <div style={{ 
       width: '600px' 
      }}> 
       {this.state.items.map(function (card, i) { 
        return (
         <Card 
          key={i} 
          index={i} 
          name={card.name} 
          moveItem={self.moveItem} 
         /> 
        ); 
       })} 
      </div> 
     ); 
    } 
}); 
Container = DragDropContext(ReactDnDBackend)(Container); 

ReactDOM.render(
    <Container />, 
    document.getElementById('app') 
); 

Answer 1

好吧，你需要一對夫婦在你的代碼的變化：關鍵屬性必須與相關

1.-在這種情況下「 card.id「，因爲如果你改變命令React想知道哪個元素要更新。

render: function() { 
    var self = this; 

    return (
     <div style={{ 
      width: '600px' 
     }}> 
      {this.state.items.map(function (card, i) { 
      return (
       <Card 
        key={card.id} 
        index={i} 
        name={card.name} 
        moveItem={self.moveItem} 
       /> 
      ); 
      })} 
     </div> 
    ); 
    } 

2：要在相同的方式工作，例如，不透明度必須是：0或1

var Card = React.createClass({ 
    render: function() { 
    var connectDragSource = this.props.connectDragSource; 
    var isDragging = this.props.isDragging; 
    var connectDropTarget = this.props.connectDropTarget; 

    return connectDragSource(connectDropTarget(
     <div style={{ 
      marginBottom: '5px', 
      background: '#fff', 
      border: '1px dashed #ccc', 
      padding: '10px 16px', 
      opacity: isDragging ? 0 : 1, 
     }}> 
      {this.props.name} 
     </div> 
    )); 
    } 
});