Question

我正在尝试在我的反应计划中使用反应DnD。在我的渲染方法中，我定义了一个名为Populate的变量，如下面的show，它返回一个像这样的卡片列表

case

我的渲染方法返回如下

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

问题是当我尝试使用拖动时，然后选择整个卡片列表进行拖动。我希望所有卡都具有单独的拖动功能。

Answer 1

如果您希望每张卡具有拖动功能，则必须将每张卡包裹在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>
  );
}

这应该会给你一张卡片列表，每张卡片都可单独拖动。

React DnD拖动整个卡片列表而不是单卡

1 个答案: