はReduxの形式の画像プレビュー

Question

私はReduxのフォームと反応して使用していると私は、ファイル入力に画像のプレビューを表示しようとしている、反応します。私は画像をプレビューすることができましたが、ファイルを選択した後にファイル入力からフォーカスを変更した場合（ファイルを選択した直後にプレビューするのではなく）、画像のみがプレビューされます。

<div className="form-group"> 
    <label htmlFor="exampleInputFile" style={{ width: '100%' }}> 
     <img id="team-logo-img" className="img-responsive center-block" src="http://placehold.it/180" /> 
     {this.renderImagePreview()} 
    </label> 
    <input type="file" id="exampleInputFile" {...teamLogoField} value={null} onChange={this.readURL(this)} /> 
</div> 

そして、私のreadURL機能：

readURL(input) { 

    input = input.props.fields.teamLogoField.value; 

    if (input && input[0]) { 
     const reader = new FileReader(); 

     reader.onloadend = function (e) { 
      jQuery('#team-logo-img') 
      .attr('src', e.target.result); 
     }; 

     reader.readAsDataURL(input[0]); 
    } 
} 

ユーザーがファイルを選択した直後に画像をプレビューする方法はあります

これは私が取ったアプローチはありますか？または私が聞いている反応redux形式を使用して画像をプレビューするためのより良いアプローチがある場合は！

============================================== ========================== 編集1：

私が使用しているアプローチは、これに基づいている： https://developer.mozilla.org/en-US/docs/Web/API/FileReader/readAsDataURL

反応し使用しないときは私のために働いてい

は

Answer 1

[OK]を、私は解決策を見つけた：私はこれに私のreadURL機能を更新：

updatePreview(event, teamLogoField) { 
    const reader = new FileReader(); 

    reader.onload = (e) => { 
     $('#team-logo-img').attr('src', e.target.result); 
    }; 

    reader.readAsDataURL(event.target.files[0]); 
    teamLogoField.onChange(event); 
} 

と、次のように処理するかの入力のonChangeでそれを呼ばれる：

onChange={ (event) => {this.updatePreview(event , teamLogoField)} } 

私は前に述べたしかしとして、このフォームで画像をプレビューする簡単な方法であると信じている：誰かがこれにより良い方法を持っている場合は、私が聞いている！

============================================== ============================= 編集1

あなたはReduxの形式のフィールドオブジェクトを渡すために持っているように見えますあなたのフィールドの新しい状態が

を更新することができますので、のonChangeハンドラはReduxのフォーム独自のonChangeを呼び出すために========================= ========================================== 編集2

I私のIMG要素では、これを行うためにもっと反応的なアプローチが見つかった。yはsrcをコンポーネント状態の変数に設定し、私のupdatePreview関数ではonloadブロックで変数の値を更新した。完了！