Typescript中修改 input type=file 的样式

最新推荐文章于 2024-08-04 16:33:59 发布

weixin_50866404

最新推荐文章于 2024-08-04 16:33:59 发布

阅读量565

点赞数

文章标签： javascript 前端 html typescript

本文链接：https://blog.csdn.net/weixin_50866404/article/details/127210388

版权

Typescript中修改 input type=file 的样式

可以使用一个button元素，使用其onClick属性绑定

input type=file的点击事件，再将input元素隐藏：display: none。

需要注意的是typescript中获取dom元素的属性时要对其类型作一定的限制。

<div>
<button className="import btn-16" onClick={() => {
    const fileInput:HTMLInputElement = document.getElementById('fileInput') as HTMLInputElement; // 获取input元素
    if (fileInput !== null) {
        fileInput.click();// 绑定input的点击事件
    }
}}>Import</button>

<input style={{display: 'none'}} 
    id='fileInput' type="file" accept=".xls, .xlsx"  
    onClick={(e) => {
        // some functions   
    }}/>
</div>

之后就可以使用css编辑button的样式来达到改变input样式的目的了。