0

我正在尝试在我的反应项目中使用反应 DnD。在我的渲染方法中，我定义了一个名为 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 回答