React 拖放事件传播问题

Question

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

例如(这有效，没有事件传播)：

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

在这个 SO-Post 中找到了答案(只是没有向下滚动足够)。

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

Answer 2

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

传递这样的事件并尝试