2017-07-23 2 views
0

Ich habe eine Funktion, die ein Array von Dateien akzeptiert.React.js: HTML Eingabe zum Übergeben von Array von Dateien onChange

Ich möchte diese Funktion wiederverwenden, ohne sie ändern zu müssen, um Dateien von einer HTML5-Eingabe zu akzeptieren.

Hier ist meine Eingabe:

render() { 
    return (
    <div> 
     <form> 
     <input className="fileInput" 
      type="file" 
      onChange={this.onUpload.bind(this)} /> 
    </form> 
    </div> 
)} 

Hier ist die Funktion, die ich anrufen möchten:

onUpload(arrayOfFiles) { 
    // do something with files 
} 

Das Problem ist, dass, wenn ich onUpload von meinem Eingang nennen, es nicht passieren in einem Array von Dateien. Um die Dateien zugreifen zu können, würde ich so etwas in meiner onUpload Funktion tun:

files = arrayOfFiles.target.files; 

Wie kann ich die Anordnung von Dateien selbst zu meiner onUpload Funktion übergeben?

Das wird nicht funktionieren:

<form> 
    <input className="fileInput" 
    type="file" 
    onChange={this.onUpload.bind(this.target.files)} /> 
</form> 

Ich erhalte die Fehler

+0

[**. Apply **] (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/apply) anstelle von '.bind'? – zer00ne

+0

@ zer00ne, gleicher Fehler mit .apply – JAck28

Antwort

0

Ändern der Eingabe in das folgende funktioniert der Trick „Eigenschaft‚Dateien‘undefinierter nicht Kann lesen“:

<input className="fileInput" 
    type="file" 
    onChange={(e) => this.onUpload(e.target.files)} /> 
Verwandte Themen