将锚点标记中的输入类型文件用于下拉项目

Question

I am trying to use the input type file in one of my drop down item which is in the anchor tag.

So, Here my code is like ,

 <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>

but here if I add one more option at the top then the next one is getting clicked for that file option. always taking the second one by default.

So, How can I resolve this ?

Answer 1

Have you tried doing something similar to this?

<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" />