Question

我试图在锚标记中的一个下拉项中使用输入类型文件。

<a className="dropdown-item" href='#'>
<i className="fa fa-cloud-upload mr-2 upload-icon" aria-hidden="true"></i>Upload Resume</a>
<input type='file' title=" " onChange={(e) => { props.uploadResumeFolder(e, item.id, item.jdName) }} directory="" webkitdirectory="" mozdirectory="" allowdirs="" multiple />

所以，现在在此之后，该下拉菜单有多个选项，但是在这里，如果我添加此选项，则单击下一个。因为我不希望“未选择文件”之类的选项显示给用户。

有人可以帮我吗？

Answer 1

尝试以下方法：

<div className="dropdown-item">
    <label for="fileUpload">
        <i className="fa fa-cloud-upload mr-2 upload-icon" aria-hidden="true"></i>Upload Resume</label>
    <input id="fileUpload" type='file' title=" "
    style="display: none;" 
    onChange={(e)=> { props.uploadResumeFolder(e, item.id, item.jdName) }} directory=""
    webkitdirectory="" mozdirectory="" allowdirs="" multiple />
</div>

<a>已替换为<div>。 <input>标签已被隐藏。但是，如果单击<label>，它将打开文件上传窗口，因为<label>具有for属性。希望对您有帮助。

您可以使用<a>标记代替我替换的<div>。

使用bootstrap4

1 个答案: