Gewusst wie: zurücksetzen von ReactJS Datei-input

Habe ich die Datei hochladen input:

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

Und ich handle auf diese Weise hochgeladen:

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 hochladen, dann laden-Ereignis nicht ausgelöst. Wie kann ich das beheben? Für einfache js-code, es war genug zu tun, die folgenden: dies.Wert = null; in change-handler. Wie kann ich es mit ReactJS?

onChange={this.getFile.bind(this)} oder getFile = (e) => {

InformationsquelleAutor Stepan Yakovenko | 2017-02-12

26

Ich denke, man kann nur löschen Sie den input-Wert wie diese :
```
e.target.value = null;
```
Datei-Eingabe kann nicht gesteuert werden, es ist kein Reagieren auf spezifische Weise, das zu tun.

genial... 🙂 es meinen Tag gerettet

InformationsquelleAutor Freez
19

Diese Arbeit für mich - ref={"ref => dieser.fileInput = ref}
```
<input id="file_input_file" type="file" onChange={(e) => this._handleFileChange(e)} ref={ref=> this.fileInput = ref} />
```
dann in meinem Fall, wenn die Datei hochgeladen wurde auf den server , lösche ich es mit der folgenden Aussage
```
 this.fileInput.value = "";
```
Ich mag den Ansatz, aber ich wollte diese von getDerivedStateFromProps und leider funktioniert es nicht, da wir keinen Zugriff auf this es.

InformationsquelleAutor Jozcar
13

Was für mich gearbeitet war eine Einstellung key - Attribut auf die input-Datei, dann, wenn ich brauchte, um es zurücksetzen ich ein update für das key-Attribut Wert:
```
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>
  )
}
```
Dass die Kräfte Reagieren, die zum Rendern der Eingabe wieder von vorne an.

Um zu erklären, wie dies funktioniert, müssen Sie aktualisieren.Zustand.theInputKey wenn Sie möchten, Stollen-Eingang. Unter der Haube ändern die Taste reagieren, re-Rendern, die Eingabe damit Sie es deaktivieren.
Ich mag diese Idee. Dann kann ich die Kontrolle über das Eingabefeld von anderen Funktionen, die ist, was ich jetzt brauche. Es funktioniert einwandfrei. Danke.
Ich mag den Ansatz, aber ich wollte diese von getDerivedStateFromProps, und zum Glück funktioniert es dort so gut, weil wir immer noch Zugang zu state. 🙂

InformationsquelleAutor tonatiuhnb
4

Tue ich es durch die Aktualisierung key in meinem Datei-Eingang.
Dies erzwingt eine re-Rendern und die zuvor ausgewählte Datei wird gehen.
```
<input type="file" key={this.state.inputKey} />
```
Ändern des Status inputKey neu-Rendern der Komponente.
Ein Weg zur Veränderung der inputKey werden, immer es zu Date.now() auf klicken Sie auf eine Schaltfläche, die Sie ausführen soll, deaktivieren Sie das Feld.

InformationsquelleAutor aelor
1

Können Sie auch diese in Ihrem input-element, wenn Sie wissen, dass Sie nicht gehen, um mit dem built-in-Datei-input-Wert.
```
<input value={""} ... />
```
Diese Weise ist der Wert immer wieder auf die " leere Zeichenfolge auf Rendern, und Sie nicht haben, um es aufzunehmen unbeholfen in ein onChange-Funktion.

InformationsquelleAutor IRTrapGod

Ich weiß, Datei-Eingang ist immer unkontrollierte jedoch der folgende code funktioniert immer noch in meiner eigenen porject, ich kann reset der Eingang mit überhaupt keine Probleme.

constructor(props) {
    super(props);
    this.state = {
        selectedFile: undefined,
        selectedFileName: undefined,
        imageSrc: undefined,
        value: ''
    };

    this.handleChange = this.handleChange.bind(this);
    this.removeImage = this.removeImage.bind(this);
}

handleChange(event) {
    if (event.target.files[0]) {
        this.setState({
            selectedFile: event.target.files[0],
            selectedFileName: event.target.files[0].name,
            imageSrc: window.URL.createObjectURL(event.target.files[0]),
            value: event.target.value,
        });
    }
}

//Call this function to reset input
removeImage() {
    this.setState({
        selectedFile: undefined,
        selectedFileName: undefined,
        imageSrc: undefined,
        value: ''
    })
}

render() {
    return (
        <input type="file" value={this.state.value} onChange={this.handleChange} />
    );
}

InformationsquelleAutor Jack L.

Hier ist meine Lösung mit redux form

class FileInput extends React.Component {
  constructor() {
    super();

    this.deleteImage = this.deleteImage.bind(this);
  }

  deleteImage() {
    //Just setting input ref value to null did not work well with redux form
    //At the same time just calling on change with nothing didn't do the trick
    //just using onChange does the change in redux form but if you try selecting
    //the same image again it doesn't show in the preview cause the onChange of the
    //input is not called since for the input the value is not changing
    //but for redux form would be.

    this.fileInput.value = null;
    this.props.input.onChange();
  }

  render() {
    const { input: { onChange, value }, accept, disabled, error } = this.props;
    const { edited } = this.state;

    return (
      <div className="file-input-expanded">
        {/* ref and on change are key properties here */}
        <input
          className="hidden"
          type="file"
          onChange={e => onChange(e.target.files[0])}
          multiple={false}
          accept={accept}
          capture
          ref={(input) => { this.fileInput = input; }}
          disabled={disabled}
        />
        {!value ?
          {/* Add button */}
          <Button
            className="btn-link action"
            type="button"
            text="Add Image"
            onPress={() => this.fileInput.click()}
            disabled={disabled}
          />
          :
          <div className="file-input-container">
            <div className="flex-row">
              {/* Image preview */}
              <img src={window.URL.createObjectURL(value)} alt="outbound MMS" />
              <div className="flex-col mg-l-20">
                {/* This button does de replacing */}
                <Button
                  type="button"
                  className="btn-link mg-b-10"
                  text="Change Image"
                  onPress={() => this.fileInput.click()}
                  disabled={disabled}
                />
                {/* This button is the one that does de deleting */}
                <Button
                  type="button"
                  className="btn-link delete"
                  text="Delete Image"
                  onPress={this.deleteImage}
                  disabled={disabled}
                />
              </div>
            </div>
            {error &&
              <div className="error-message"> {error}</div>
            }
          </div>
        }
      </div>
    );
  }
}

FileInput.propTypes = {
  input: object.isRequired,
  accept: string,
  disabled: bool,
  error: string
};

FileInput.defaultProps = {
  accept: '*',
};

export default FileInput;

InformationsquelleAutor Agustina Chaer

0

Reagieren, ist nichts anderes als JavaScript, und wir können DOM-manipulation Reagieren-code als auch.
Diese arbeiten sollen
```
document.getElementsByClassName('upload')[0].value = null;
```
InformationsquelleAutor Rastko Sasic

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.