dropzoneでクリック可能な初期設定オプションを使用する

Question

dropzoneでクリック可能なオプションを使用したいと思います。私はこの上に与えられたdropzoneコンポーネントを使用していますlink.

私は以下の設定でdropzoneをレンダリングしています。

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

以下のコードは、ビューを生成する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 }); 
}; 

Answer 1

プログラムによってドロップゾーンコンポーネントを有効または無効にすることができます。

有効/無効のセクションについては、Dropzone Methods Documentationの下部を確認してください。

handleChangeの関数では、単にドロップダウンメニューの新しい値に基づいてdropzoneComponent.enable()またはdropzoneComponent.disable()を呼び出します。