时间戳

首页 > 解决方案 > React拖放事件传播问题

reactjs - React拖放事件传播问题

问题描述

我有一个简单的拖放设置。比较特别的是，dropzones里面可以有dropzones。我的问题是，每当我在子组件中放置一些东西时，父事件也会被触发，但仅在某些情况下。

例如（这有效，没有事件传播）：

export default class Folder extends Component {
    constructor(props) {
        super(props);
        this.state = {
            dragActive: false
        };
    }

    onDragOver = (e) => {
        e.preventDefault();
        this.setState({ dragActive: true });
    }

    onDragLeave = () => {
        this.setState({ dragActive: false });
    }

    onDrop = (e) => {
        e.stopPropagation();
        alert("test");
    }

    render() {
        return (
            <div className="col-6 col-sm-4 col-md-3 col-lg-2 col-xl-8ths" onDragOver={this.onDragOver} onDragLeave={this.onDragLeave} onDrop={this.onDrop}>

            </div>
        );
    }
}

重要的部分是这里的这一行： 

onDrop={this.onDrop}

如果我的 drop 事件在同一个组件内，一切都会按预期工作。

一旦我将行更改为：

onDrop={() => this.props.onDropFunction(event, this.props.folder.id)}

事件传播停止工作。这是我在父级内部调用的 onDrop 函数：

onDrop = (e, folderId) => {
    e.stopPropagation();
    e.preventDefault();
    var files = this.fileListToArray(e.dataTransfer.files);
    this.setState({
        dragActive: false,
        uploadFiles: files
    }, () => {
        this.uploadFiles(folderId);
    });
}

标签： reactjs

解决方案

onDrop={(event) => this.props.onDropFunction(event, this.props.folder.id)}

通过这样的事件并尝试

推荐阅读