避免打开文件选择弹出窗口

时间:2016-12-01 18:51:10

标签: javascript reactjs meteor meteor-react

我正在预览拖放区内拖动到dropzone的图像。

<Dropzone multiple={true} style={dropzoneStyle}  onDrop={this.onDrop.bind(this)} accept="image/*">
    <Preview files={this.state.files} remove={this.remove} text="Drop your images here!"/>
</Dropzone>

当您在dropzone内部单击时,将打开文件选择弹出窗口,您还可以使用该方法选择图像。我希望用户能够通过单击图像顶部的X来从列表中删除图像。问题是,通过单击该图标,您还可以单击dropzone,因此将删除该图像,但会打开文件选择弹出窗口。任何帮助将不胜感激!

enter image description here

1 个答案:

答案 0 :(得分:1)

我不确定您是否可以控制预览组件,但如果您可以通过单击&#34; X&#34;来访问click事件,则应该能够调用stopPropagation()那些事件。例如:

onClickRemove(e) {
  e.stopPropagation();
  // Call whatever function removes the image
}