javascript - 在下拉项的 anchor 标记中使用输入类型文件

Question

我正在尝试在 anchor 标记中的下拉项之一中使用输入类型文件。

所以，我的代码是这样的，

 <div className="dropdown-menu actions-text">
     <a className="dropdown-item" href="#" onClick={e => props.viewJob(e, item.id, item.jdName)}>
         <i className="fa fa-envelope mr-2 view-icon" />
         View JD
     </a>
     <a className="dropdown-item" href='#'>
         <i className="fa fa-cloud-upload mr-2 upload-icon" aria-hidden="true" />
         Upload Resume
     </a>
     <input type='file' title="" onChange={(e) => { props.uploadResumeFolder(e, item.id, item.jdName) }}
            directory="" webkitdirectory="" mozdirectory="" allowdirs="" multiple />
     <a className="dropdown-item" href="#"><i className="fa fa-download mr-2 download-icon" aria-hidden="true" />
         Download Tracker</a>
</div>

但在这里，如果我在顶部再添加一个选项，那么下一个选项将被点击以获取该文件选项。默认总是取第二个。

那么，我该如何解决呢？

Answer 1

你试过做类似的事情吗？

<a href="#" onClick="(function(e){
    console.log('clicking', e);
    document.getElementById('X1').click();
})();">click here</a>

<input hidden type='file' title="" onChange="(function(e){
    console.log('changed file input', e)
})();" id="X1" />