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从其父级读取props.value，它从Redux读取值。一切都很好。但是，用户可以覆盖文件扩展名，这会导致文件在没有扩展名的情况下上载。哎呀！我的问题是，如何在受控文本输入中保留文件扩展名。我目前的想法涉及到这样的事情：

// 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

我想我找到了一个可能有点好奇的人的答案。它实际上是一个非常简单的修复。只需提供一个keydown监听器来设置event.target.selectionEnd属性，如下所示：

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

更多＆＃34; React＆＃34;做事方式是向ref提供input，然后使用selectionEnd设置ref，但我的UI结构使这更加昂贵且耗时固定。不过，如果有人有任何其他建议，请开火！

在受控反应文本输入上保留文件扩展名

1 个答案: