如何使用reactjs更改文件输入的默认文本？答案

【问题标题】：How to change the default text of the file input with reactjs?如何使用reactjs更改文件输入的默认文本？
【发布时间】：2020-09-22 06:15:27
【问题描述】：

我的 jsx 上有一个输入文件，我想更改文本“Choisir un fichier”和“Aucun fichier choisi”

我的代码是：

<div className="form-group">
    <label className="control-label col-sm-2" ><strong>Site - Logo (150 x 30px)</strong></label>
    <div className="col-sm-10">
        <input type="file" className="form-control-file" onChange={this.handleImgLogoChange} style={{border:'.1rem solid #d9d9d9', borderRadius:'.2rem'}}/>
    </div>
</div>

当我运行它时，我得到：

如何更改输入文件的默认文本？

【问题讨论】：

如果我正确理解了这个问题，我们正在谈论input 样式。如果这是input，那么placeholder 负责它。看这里，看看有没有帮助。 (w3schools.com/howto/howto_css_placeholder.asp)
@al-bulat 我说说标准输入文件的按钮文本

标签： html css reactjs input jsx

【解决方案1】：

        <div style={{width: 80, height: 80, border: '1px solid red', position: 'relative'}}>
          <label for='file' style={{position: 'absolute', width: 80, height: 80, cursor: 'pointer'}}>select file</label>
          <input id='file' type='file' onChange={this.handleFileUpload} style={{opacity: 0}} />
        </div>

可能是这样的？

你可以在stackblitz demo查看在线演示

【讨论】：

我来说说标准输入文件的按钮文本
首先，文件的输入类型不改变默认文本，你必须用另一种方式来模拟标准输入文件的按钮文本