React DnDは単一のカードの代わりにカードの全リストをドラッグします

Question

私の反応プロジェクトで反応DnDを使用しようとしています。私はこの

render() { 
     var isDragging = this.props.isDragging; 
     var connectDragSource = this.props.connectDragSource; 

     var Populate = this.props.mediaFiles.map((value) => { 
      return(
       <div> 
       <MuiThemeProvider> 
        <Card style= {{marginBottom: 2, opacity: isDragging ? 0 : 1}} id={value.id} key={value.id} 
          onMouseOver={this.onMouseOver} 
          onMouseOut={this.onMouseOut} 
          //onTouchTap={() => {this.handleClick(value.id)}} 
          zDepth={this.state.shadow}> 
         <CardHeader 
          title={value.Episode_Name} 
          //subtitle={value.description} 
          actAsExpander={false} 
          showExpandableButton={false} 
         /> 
        </Card> 
       </MuiThemeProvider> 
       </div> 
       ) 
     }); 

のようなカードのリストを返します。そして、私がしようとすると、この

return connectDragSource (
      <div> 
       <MuiThemeProvider> 
        <div className="mediaFilesComponent2"> 
         {Populate}  
        </div> 
       </MuiThemeProvider> 
      </div> 
     ) 

問題があるようにレンダリング方法の私のリターンが見え以下のショーのように移入という名前の変数を定義し、私のrenderメソッドでドラッグを使用すると、カードの全リストがドラッグのために選択されます。私は個々のドラッグ機能を持つすべてのカードを欲しい。

Answer 1

各カードにドラッグ機能が必要な場合は、リスト全体ではなく、DragSourceで各カードをラップする必要があります。

import React, { Component, PropTypes } from 'react'; 
import { ItemTypes } from './Constants'; 
import { DragSource } from 'react-dnd'; 


const CardSource = { 
    beginDrag: function (props) { 
    return {}; 
    } 
}; 

function collect(connect, monitor) { 
    return { 
    connectDragSource: connect.dragSource(), 
    isDragging: monitor.isDragging() 
    } 
} 

class CardDragContainer extends React.Component { 
    render() { 
    return this.props.connectDragSource(
     <div> 
     <Card style= {{marginBottom: 2, opacity: this.props.isDragging ? 0 : 1}} id={value.id} key={value.id} 
          onMouseOver={this.props.onMouseOver} 
          onMouseOut={this.props.onMouseOut} 
          zDepth={this.props.shadow}> 
      <CardHeader 
       title={props.title} 
       actAsExpander={false} 
       showExpandableButton={false} 
      /> 
      </Card> 
     </div> 
    ) 
    } 
} 

export default DragSource(ItemTypes.<Your Item Type>, CardSource, collect)(CardDragContainer); 

その後、あなたはこのような高いレベルのコンポーネントのレンダリングにこのDragContainerを使用します：

render() { 
    var Populate = this.props.mediaFiles.map((value) => { 
     return(
     <div> 
      <MuiThemeProvider> 
       <CardDragContainer 
       value={value} 
       onMouseOver={this.onMouseOver} 
       onMouseOut={this.onMouseOut} 
       shadow={this.state.shadow} 
       /> 
      </MuiThemeProvider> 
     </div> 
    ) 
    }); 

    return (
    <div> 
     <MuiThemeProvider> 
     <div className="mediaFilesComponent2"> 
      {Populate}  
     </div> 
     </MuiThemeProvider> 
    </div> 
); 
} 

それ私はこのように、DragSourceの中に包まれたそれ自身のコンポーネント、にカードを分割うカードのリストを提供する必要があります。それぞれのカードは個別にドラッグ可能です。