0

反応プロジェクトで反応 DnD を使用しようとしています。私の render メソッドでは、以下に示すように Populate という名前の変数を定義します。これは、このようなカードのリストを返します

 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>
        )

問題は、ドラッグを使用しようとすると、カードのリスト全体がドラッグ用に選択されることです。すべてのカードに個別のドラッグ機能が必要です。

4

1 に答える 1

0

各カードにドラッグ機能を持たせたい場合は、リスト全体ではなく、各カードを DragSource でラップする必要があります。次のように、Card を独自のコンポーネントに分割し、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>
  );
}

これにより、カードのリストが表示され、それぞれが個別にドラッグ可能になります。

于 2016-12-15T01:44:57.937 に答える