【问题标题】:Avoid opening file selection popup避免打开文件选择弹出窗口
【发布时间】:2016-12-02 03:58:37
【问题描述】:

我正在预览拖放到放置区内的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 来从列表中删除图像。问题是通过单击该图标,您还单击了放置区,因此图像被删除但文件选择弹出窗口打开。任何帮助将不胜感激!

【问题讨论】:

    标签: javascript reactjs meteor meteor-react


    【解决方案1】:

    我不确定您是否可以控制预览组件,但如果您可以通过单击“X”访问单击事件,则应该能够对这些事件调用 stopPropagation()。例如:

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

    【讨论】: