Dateierweiterung bei einer gesteuerten Texteingabe beibehalten

Question

Ich habe eine einfache Dateieingabe in meiner App zum Speichern von Anhängen, die ein Benutzer hochlädt.

<input id='uploadFile' type='file' name="files" /> 
<label htmlFor='uploadFile' onClick={this.onFileClick}>File</label> 

Ich habe auch eine Texteingabe, wo sie den Dateinamen der hochgeladenen Datei ändern können.

<input id={props.id} type='text' value={props.value} onChange={(event) => props.onChangeHandler(event)} /> 

Die input liest props.value von seinem übergeordneten, die den Wert von Redux liest. Alles funktioniert super. Ein Benutzer kann jedoch die Dateierweiterung überschreiben, was dazu führt, dass die Datei ohne Erweiterung hochgeladen wird. Huch! Meine Frage ist, wie kann ich die Dateierweiterung in einer kontrollierten Texteingabe erhalten. Meine heutige Denken beinhaltet etwas wie folgt aus:

// check the MIME type of the upload 
let mimeType = attachmentswindow.uploadedAttachment.type; 

// check the text input for presence of a "." 
// if it's not there, we better add the extension! 
let updatedAttachmentFilename = event.target.value.includes(".") ? 
    event.target.value : 
    event.target.value + '.' + mimeType.substring(mimeType.lastIndexOf("/") + 1); 

// store the new file name in redux 
dispatch(updateUploadedAttachmentFilename({ updatedAttachmentFilename })); 

diese Art von Arbeiten, aber wirklich, würde Ich mag es unmöglich machen für den Benutzer zu Fall die Dateierweiterung berühren. Gibt es eine Möglichkeit, dies mit einer kontrollierten Texteingabe in React zu tun? Vielen Dank im Voraus für jede Hilfe.

Answer 1

Ich denke, ich habe eine Antwort für jeden gefunden, der neugierig sein könnte. Es ist eigentlich eine ziemlich einfache Lösung. liefert einfach einen keydown Zuhörer, dass die event.target.selectionEnd Eigenschaft wie so setzt:

onKeyDown(event) { 
    event.target.selectionEnd = event.target.value.lastIndexOf("."); 
} 

Eine „React“ Art und Weise, Dinge zu tun wäre, ein ref zum input zu liefern und dann die selectionEnd die ref verwenden, aber meine UI Struktur machte dies eine teurere und zeitraubende Lösung. Trotzdem, wenn jemand andere Vorschläge hat, bitte wegschiessen!