在 dropzone 中使用可点击的初始配置选项答案

【问题标题】：Using clickable initial configuration option in dropzone在 dropzone 中使用可点击的初始配置选项
【发布时间】：2016-08-14 13:50:53
【问题描述】：

我想在 dropzone 中使用可点击选项。我正在使用 link.

上给出的 dropzone 组件

我正在使用以下配置渲染 dropzone。

let djsConfig = {
  addRemoveLinks: true,
  acceptedFiles: 'image/jpeg,image/png,image/gif,application/pdf,application/txt',
  clickable: false,
  autoProcessQueue: false,
};

下面的代码是生成视图的render方法的return语句。

return(
<div>
<DropzoneComponent
          config={componentConfig}
          eventHandlers={eventHandlers}
          djsConfig={djsConfig}
    />
<DropDownMenu
           value={this.state.value}
           onChange={this.handleChange} 
          >
            <MenuItem value={0} primaryText="Select Document Type" />
            <MenuItem value={1} primaryText="Pan Card" />
            <MenuItem value={2} primaryText="Votar Id" />
            <MenuItem value={3} primaryText="Certificate" />
            <MenuItem value={4} primaryText="Passports" />
          </DropDownMenu>
</div>
);

我想使用注释中描述的 handleChange 方法。

handleChange = (event, index, value) => {
/*
 When dropdown value is 0 then it dropzone should not be clickable and 
 and after dropdown have some value > 0, dropzone should be clickable.
*/
this.setState({ value });
};

【问题讨论】：

标签： reactjs redux dropzone.js

【解决方案1】：

Dropzone 组件可以通过编程方式启用和禁用。

查看Dropzone Methods Documentation 的底部以找到有关启用/禁用的部分。

在您的handleChange 函数中，只需根据下拉菜单的新值调用dropzoneComponent.enable() 或dropzoneComponent.disable()。

【讨论】：