So setzen Sie die ReactJS-Dateieingabe zurück

Ich habe Datei-Upload-Eingabe:

<input onChange={this.getFile} id="fileUpload" type="file" className="upload"/>

Und ich handhabe den Upload so:

getFile(e) {
    e.preventDefault();
    let reader = new FileReader();
    let file = e.target.files[0];
    reader.onloadend = (theFile) => {
        var data = {
            blob: theFile.target.result, name: file.name,
            visitorId:  this.props.socketio.visitorId
        };
        console.log(this.props.socketio);
        this.props.socketio.emit('file-upload', data);
    };
    reader.readAsDataURL(file);
}

Wenn ich dieselbe Datei zweimal hochlade, wird das Upload-Ereignis nicht ausgelöst. Wie kann ich das beheben? Für einfachen js-Code reichte es aus, Folgendes zu tun: this.value = null; im Changehandler. Wie kann ich das mit ReactJS machen?

Ich denke, Sie können den Eingabewert einfach so löschen:

e.target.value = null;

Die Dateieingabe kann nicht kontrolliert werden, dafür gibt es keine React-spezifische Möglichkeit.

Bearbeiten Für alte Browser (

Sehen http://jsbin.com/zurudemuma/1/edit?js, Ausgabe (getestet auf IE10 & 9)

Was für mich funktioniert hat, war das Einstellen von a key Attribut auf die Dateieingabe, und wenn ich es zurücksetzen musste, aktualisiere ich den Wert des Schlüsselattributs:

functionThatResetsTheFileInput() {
  let randomString = Math.random().toString(36);

  this.setState({
    theInputKey: randomString
  });
}

render() {
  return(
    <div>
      <input type="file"
             key={this.state.theInputKey || '' } />
      <button onClick={this.functionThatResetsTheFileInput()} />
    </div>
  )
}

Das zwingt React, die Eingabe von Grund auf neu zu rendern.

Das funktioniert für mich – ref={ref => this.fileInput = ref}

<input id="file_input_file" type="file" onChange={(e) => this._handleFileChange(e)} ref={ref=> this.fileInput = ref} />

dann in meinem Fall, sobald die Datei auf den Server hochgeladen wurde, lösche ich sie mit der folgenden Anweisung

 this.fileInput.value = "";

Mit jedem Klick onClick man kann die eingabe zurücksetzen, damit sogar mit der gleichen datei onChange wird ausgelöst.

<input onChange={this.onChange} onClick={e => (e.target.value = null)} type="file" />

Folgendes hat bei mir mit React Hooks funktioniert. Dies geschieht über einen sogenannten „Controlled Input“. Das heißt, die Eingänge sind kontrolliert nach Staat, oder ihre Quelle der Wahrheit ist der Staat.

TL;DR Das Zurücksetzen der Dateieingabe war ein zweistufiger Prozess, bei dem sowohl die useState() und useRef() Haken.

HINWEIS: Ich habe auch angegeben, wie ich eine Texteingabe zurücksetze, falls jemand anderes neugierig war.

function CreatePost({ user }) {
    const [content, setContent] = React.useState("");
    const [image, setImage] = React.useState(null); //See Supporting Documentation #1
    const imageInputRef = React.useRef(); //See Supporting Documentation #2

    function handleSubmit(event) {
        event.preventDefault(); //Stop the pesky default reload function
        setContent(""); //Resets the value of the first input - See #1

        //////START of File Input Reset
        imageInputRef.current.value = "";//Resets the file name of the file input - See #2
        setImage(null); //Resets the value of the file input - See #1
        //////END of File Input Reset
    }

    return (
    <div>
        <form onSubmit={handleSubmit}>
            <input 
            type="text" 
            placeholder="Add Post Content" 
            onChange={event => setContent(event.target.value)}
            value={content} //Make this input's value, controlled by state
            />
            <input 
            type="file"
            onChange={event => setImage(event.target.files[0])} //See Supporting Doc #3
            ref={imageInputRef} //Apply the ref to the input, now it's controlled - See #2
            />
            <button type="submit">Submit Form</button>
        </form>
    </div>
    )
};

Unterstützende Dokumentation:

1. useState-Hook
   • Gibt einen zustandsbehafteten Wert und eine Funktion zum Aktualisieren zurück.
2. useRef-Hook
   • Wenn Sie ein ref-Objekt an React übergeben, setzt React seine aktuelle Eigenschaft auf den entsprechenden DOM-Knoten, sobald sich dieser Knoten ändert.
3. Verwenden von Dateien aus Web-Apps
   • Wenn der Benutzer nur eine Datei auswählt, muss nur die erste Datei der Liste betrachtet werden.

import React, { useRef } from "react";

export default function App() {
  const ref = useRef();

  const reset = () => {
    ref.current.value = "";
  };

  return (
    <>
      <input type="file" ref={ref} />
      <button onClick={reset}>reset</button>
    </>
  );
}

Sie können dies auch in Ihr Eingabeelement aufnehmen, wenn Sie wissen, dass Sie den integrierten Dateieingabewert überhaupt nicht verwenden werden.

<input value={""} ... />

Auf diese Weise wird der Wert beim Rendern immer auf den leeren String zurückgesetzt und Sie müssen ihn nicht umständlich in eine onChange-Funktion einbinden.