使一个组件从一个地方消失并使其出现在另一个地方

Question

我正在做一个反应应用程序。我的页面上有两列，每列都包含listitems。我添加了将列表项从第一列拖到第二列的功能。我想要的是：只要我将一个listitem放到第二列，它应该开始显示一个进度条，当进度条达到100％时，该列表项应该自动从第二列消失并出现在第三列。是否有可能做到这一点？如果是这样，那怎么样？

FirstColumn

.about__inner

MediaCard（它呈现的ListItem）

class RawFilesColumn extends Component {
    constructor(props) {
        super(props);
        this.state = {cards:this.props.mediaFiles}
    }

    removeCard(index) {
        this.setState(update(this.state, {
            cards: {
                $splice: [
                    [index, 1]
                ]
            }
        }));
    }

    moveCard(dragIndex, hoverIndex) {
        const cards  = this.state.cards;
        const dragCard = cards[dragIndex];

        this.setState(update(this.state, {
            cards: {
                $splice: [
                    [dragIndex, 1],
                    [hoverIndex, 0, dragCard]
                ]
            }
        }));
    }

    render() {
        const {cards} = this.state;
        var Populate = cards.map((value, i) => {
            return(
                <MediaCard id={value.id}
                           key={value.id}
                           index = {i}
                           title={value.Episode_Name}
                           card = {value}
                           listId={this.props.id}
                           removeCard={this.removeCard.bind(this)}
                           moveCard={this.moveCard.bind(this)}

                />
            )
        });

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

                        <div className="dividerDiv"></div>
                    </div>
                </MuiThemeProvider>
            </div>
        )
    }
}

const mapStateToProps = (state) => {
    return {
        mediaFiles: state.mediaFileStore,
        cards: state.cardReducer
    };
};

function matchDispatchToProps(dispatch) {
    return bindActionCreators({cardSelected: cardSelected}, dispatch);
}


export default connect(mapStateToProps, matchDispatchToProps)(RawFilesColumn);

第二栏

const Types = {
    CARD: 'Card'
};
const cardSource = {
    beginDrag(props) {
        // Return the data describing the dragged item
        console.log("yo"+props.listId)
        return {
            index: props.index,
            listId: props.listId,
            card: props.card
        };
    },

    endDrag(props, monitor) {
        const item = monitor.getItem();
        const dropResult = monitor.getDropResult();

        if (props.listId !== item.listId ) {
            props.removeCard(item.index);
        }
    }

};

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

class MediaCard extends Component{
    constructor(props) {
        super(props);
        this.state = {shadow: 1}
    }
    onMouseOver = () => this.setState({shadow: 1});
    onMouseOut = () => this.setState({shadow: 1});

    handleClick(name){
        console.log(name);
    }
    render(){
        const { card, isDragging, connectDragSource, connectDropTarget } = this.props;
        var opacity = isDragging? 0 : 1 ;
        return connectDragSource(connectDropTarget(
            <div>
                <MuiThemeProvider>
                    <Card style= {{marginBottom: 2, opacity:opacity}}  id={this.props.id}
                          onMouseOver={this.onMouseOver}
                          onMouseOut={this.onMouseOut}
                          onTouchTap={() => {this.props.handleClick(this.props.id)}}
                          zDepth={this.state.shadow}>
                        <CardHeader
                            title={this.props.title}
                            //subtitle={value.description}
                            actAsExpander={false}
                            showExpandableButton={false}
                        />
                    </Card>
                </MuiThemeProvider>
            </div>
        ));
    }
}

const cardTarget = {

    hover(props, monitor, component) {
        const dragIndex = monitor.getItem().index;
        const hoverIndex = props.index;
        const sourceListId = monitor.getItem().listId;

        // Don't replace items with themselves
        if (dragIndex === hoverIndex) {
            return;
        }

        // Determine rectangle on screen
        const hoverBoundingRect = findDOMNode(component).getBoundingClientRect();

        // Get vertical middle
        const hoverMiddleY = (hoverBoundingRect.bottom - hoverBoundingRect.top) / 2;

        // Determine mouse position
        const clientOffset = monitor.getClientOffset();

        // Get pixels to the top
        const hoverClientY = clientOffset.y - hoverBoundingRect.top;

        // Only perform the move when the mouse has crossed half of the items height
        // When dragging downwards, only move when the cursor is below 50%
        // When dragging upwards, only move when the cursor is above 50%

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


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

        // Time to actually perform the action
        if ( props.listId === sourceListId ) {
            props.moveCard(dragIndex, hoverIndex);


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

export default flow(
    DropTarget("Card", cardTarget, connect => ({
        connectDropTarget: connect.dropTarget()
    })),
    DragSource("Card", cardSource, (connect, monitor) => ({
        connectDragSource: connect.dragSource(),
        isDragging: monitor.isDragging()
    }))
)(MediaCard);

第三栏

const cards = [];
const containerID = 2;

class MachineColumn extends Component{

    constructor(props) {
        super(props);
        this.state = {cards: cards};
    }

    pushCard(card) {
        this.setState(update(this.state, {
            cards: {
                $push: [ card ]
            }
        }));
    }

    render(){
        const {connectDropTarget, isOver, canDrop } = this.props;
        const isActive = isOver && canDrop;
        let backgroundColor = '';
        if (isActive) {
            backgroundColor = '#A9A9A9';
        } else if (canDrop) {
            backgroundColor = '#A9A9A9';
        }

        return connectDropTarget(
            <div>
            <div className="MachineColumnDiv" style={{background:backgroundColor}}>
                {this.state.cards.map((card, i) => {
                    return (
                        <MediaCard
                            id={card.id}
                            key={card.id}
                            index = {i}
                            title={card.Episode_Name}
                            card = {card}
                            listId={this.props.listId}/>
                    );
                })}
            </div>
                <div className="columnName2">
                    Process
                </div>
                <div className="dividerDiv2"></div>
            </div>
        );
    }
}

const cardTarget = {
        drop(props, monitor, component ) {
            const {id} = props;
            console.log("hell"+id);
        const sourceObj = monitor.getItem();
        if ( id !== sourceObj.listId )component.pushCard(sourceObj.card)
        return {
            listId: id
        };
    }
};

export default DropTarget("Card", cardTarget, (connect, monitor) => ({
    connectDropTarget: connect.dropTarget(),
    isOver: monitor.isOver(),
    canDrop: monitor.canDrop()
}))(MachineColumn);