Question

我有一个简单的拖放设置。特殊的是，在dropzone中可以有dropzone。我的问题是，每当我在子组件中放置某些内容时，父事件也会被触发，但但仅限于某些情况。

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

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

Answer 1

在this SO-Post中找到了答案（只是没有足够向下滚动）。

因此，显然，解决方案是基本上使用第一种方法，并将alert("test")部分替换为this.props.onDropFunction(event, this.props.folder.id);

Answer 2

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

通过这样的事件并尝试

反应拖放事件传播问题

2 个答案: