Использование файла типа ввода в теге привязки для выпадающего элемента

Question

Я пытаюсь использовать файл типа ввода в одном из раскрывающихся элементов, который находится в теге привязки.

Итак, вот мой код:

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