バージョン6.0の複数の画像をアップロードするためのフィールドを追加するredux-formのrc.3

Question

私はredux-form v6.0.0 rc.3を試していて、複数の画像をアップロードするためのフィールドを追加しようとしています。

アイデア1：私は両方試した

onDrop(files, evt) { 
     console.log('received files: ', files); 
     evt.preventDefault(); 
    } 

<Dropzone 
        onDrop={ this.dropFile } 
       > 
        <div>Try dropping some files here, or click to select files to upload.</div> 
       </Dropzone> 

：サードパーティ製のドロップゾーン・コンポーネントを使用します。type = "ファイル"

attachImages(images) { 
     console.info('images received: ', images); 
    } 

<Field 
         name="pics" 
         component={renderInput} 
         placeholder="Pictures" 
         onDrop={this.attachImages} 
         type="file" /> 

アイデア2でフィールドを追加最初のものはonDrop関数をまったく起動できませんが、2番目の考えはより有望ですが、ver 6.0.0 rc.3のAPIを使ってフィールドを追加する方法はわかりません。誰でも知っていますか？

Answer 1

多くの苦労の末、DropzoneコンポーネントのonDropコールバックを少し修正することで、2番目のアイデアを作った。この変更には、reduxFormラッパーコンポーネントのdispatch関数のアクションタイプredux-form/CHANGEを使用することが含まれます。

onDrop(files, evt) { 
     console.log('received files: ', files); 
     evt.preventDefault(); 
     this.props.dispatch({ 
      type: 'redux-form/CHANGE', 
      field: 'images', 
      value: files, // files is an array of File 
     }); 
    } 

はその後減速で、私はアクションタイプredux-form/CHANGEを監視し、アップロードするファイルを抽出します。これはちょっとハッキリすぎるかもしれませんが、現在のver 6 RC3 APIで動作します。