reactjs - 如何在reactjs中更改输入类型=“file”中的默认文本？

Question

我想更改“选择文件”按钮上的默认文本
当我们使用 input type="file"

我通读了 Change default text in input type="file"? ，但我的情况是在 reactjs 中。

我被告知“React 通常不使用 document.getElementById 来完成任务。”
那么有没有更好的解决方案呢？

非常感谢您的帮助。

Answer 1

我不相信有一个可靠的、跨浏览器的解决方案。但是，您可以改为执行以下操作:

<label htmlFor="filePicker" style={{ background:"grey", padding:"5px 10px" }}>
My custom choose file label
</label>
<input id="filePicker" style={{visibility:"hidden"}} type={"file"}>

这里的文件 input元素与相应的 label“配对”元素通过 id 和 for 属性(注意 react 中， for 由 htmlFor 指定)。

这种配对会导致用户点击与 label 的交互。元素来触发 input 上的默认点击行为element - 在这种情况下，将导致 OS 文件选择器对话框打开。

这种技术使您可以控制文件选择器的标签，还允许您根据需要为伪“标签按钮”指定样式。

希望有帮助!