如何在reactjs中更改input type =“file”中的默认文本？

Question

当我们使用 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与相应的元素“配对” （请注意，在 React 中，由 指定）。labelidforforhtmlFor

这种配对会导致用户单击与label元素的交互，从而触发input元素上的默认单击行为 - 在本例中，这将导致操作系统文件选择器对话框打开。

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

希望有帮助！