ReactJS + Redux：Mozilla File APIを使ってローカルイメージを選択してWebにアップロードするには？

Question

ボタンをクリックしてクリックすると、ローカルディレクトリが開き、ユーザーが画像を選択できるようになります。一度選択すると、そのディレクトリソースアドレスを保存し、それを表示するために<img src=""/>のsrcに渡したいと思います。

私はそれを達成するために、次の使用しようとしています： https://developer.mozilla.org/en-US/docs/Using_files_from_web_applications

それのHTMLは次のとおりです。

export default class fileUploader extends Component { 
    render(){ 
    return(
     <div> 
     <input type="file" id="fileElem" multiple accept="image/*" style="display:none" onchange="handleFiles(this.files)"/> 
     <a href="#" id="fileSelect">Select some files</a> 
     <div id="fileList"> 
      <p>No files selected!</p> 
     </div> 
     </div> 
    ) 
    } 
} 

とJSは次のとおりです。HTMLのための<input ...>については

window.URL = window.URL || window.webkitURL; 

var fileSelect = document.getElementById("fileSelect"), 
    fileElem = document.getElementById("fileElem"), 
    fileList = document.getElementById("fileList"); 

fileSelect.addEventListener("click", function (e) { 
    if (fileElem) { 
    fileElem.click(); 
    } 
    e.preventDefault(); // prevent navigation to "#" 
}, false); 

function handleFiles(files) { 
    if (!files.length) { 

    fileList.innerHTML = "<p>No files selected!</p>"; 

    } else { 

    fileList.innerHTML = ""; 
    var list = document.createElement("ul"); 
    fileList.appendChild(list); 

    for (var i = 0; i < files.length; i++) { 
     var li = document.createElement("li"); 
     list.appendChild(li); 

   var img = document.createElement("img"); 
   img.src = window.URL.createObjectURL(files[i]); 
   img.height = 60; 
   img.onload = function() { 
     window.URL.revokeObjectURL(this.src); 
   } 

     console.log(img.height) 

   li.appendChild(img); 
   var info = document.createElement("span"); 
   info.innerHTML = files[i].name + ": " + files[i].size + " bytes"; 
   li.appendChild(info); 
  } 
  } 
} 

エラーが発生しました：Unterminated JSX contents何が問題なのでしょうか？私は/を試してみた/ <input.../>まだそれはまだエラーをスローアップ。

また、1つのイメージファイルを選択してそのディレクトリソースアドレスを<img/>のsrcに渡すことができるようにJSを改訂するにはどうすればよいですか？

Answer 1

Reactを使用する場合、document.getElementByIdなどの直接的なDOM操作を使用したくないということです。 Reactは仮想DOMと連携し、実際のDOMのやりとりを処理します。そのため、非常に高速です。そこには、ある時点でもっと学ぶ価値のある魔法があります。あなたは、一般には、物事を行う必要があります、道具の状態で、バーチャルDOMにあなたのレンダリング機能で書くために使用します。

あなたのコンポーネントは、この（未テスト）のようになります。

class FileUploader extends Component { 
    constructor() { 
     super(); 
     this.handleChange = this.handleChange.bind(this); 
     this.state = { file: false }; 
    } 

    handleChange(e) { 
     this.setState({ file: e.target.value }); 
    } 

    render(){ 
     const image = (this.state.file) ? <img src={this.state.file} /> : null; 

     return(
      <div> 
       <input type="file" id="fileElem" multiple accept="image/*" onChange={this.handleChange} style={{ display: 'none' }} /> 
       <a href="#" id="fileSelect"> 
        <label htmlFor="fileElem">Select some files</label> 
       </a> 
       <div id="fileList"> 
        {image} 
       </div> 
      </div> 
     ); 
    } 
} 

これは、コンポーネントに首都最初の手紙、それゆえ「FileUploader」を与えるために、従来のです。