コントロールされた反応テキスト入力上にファイル拡張子を保存する

Question

ユーザーがアップロードする添付ファイルを保存するための簡単なファイル入力がアプリケーションにあります。

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

アップロードされたファイルのファイル名を変更できるテキスト入力もあります。

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

inputはReduxのからの値を読み出し、その親からprops.valueを読み出します。すべて素晴らしいです。ただし、ユーザーはファイル拡張子を上書きすることができ、拡張子なしでファイルがアップロードされます。 Yikes！私の質問は、どのように制御されたテキスト入力でファイル拡張子を保存することができますです。私の現在の考え方は次のようなものが含ま：

// 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 })); 

作品のこの種を、本当に、私はそれは不可能イベントにユーザがファイルの拡張子に触れるためにしたいのですが。 Reactで制御されたテキスト入力でこれを行う方法はありますか？助けを前にありがとう。

Answer 1

私は好奇心があるかもしれない人のために答えを見つけたと思う。これは実際には非常に単純な修正です。単にそのようevent.target.selectionEndプロパティを設定します​​リスナー提供：物事の

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

より「リアクト」の方法はinputにrefを供給することであろうが、その後refを使用してselectionEndを設定したが、私のUIこの構造により、コストと時間がかかりました。それでも誰か他の提案がある場合は、離れて発砲してください！