Как я могу вручную запустить событие click в ReactJS?
Когда пользователь нажимает на элемент1, я хочу автоматически запускать клик по тегу input.
<div className="div-margins logoContainer">
<div id="element1" className="content" onClick={this.uploadLogoIcon}>
<div className="logoBlank" />
</div>
<input accept="image/*" type="file" className="hide"/>
</div>
Вы можете использовать ref prop для получения ссылки на базовый HTMLInputElement через обратный вызов, сохраните ссылку как свойство класса, затем используйте эту ссылку для последующего запуска щелчка с помощью обработчиков событий с помощью HTMLElement.click.
В вашем методе render:
<input ref={input => this.inputElement = input} ... />
В обработчике событий:
this.inputElement.click();
Обратите внимание на функцию ES6 arrow, которая обеспечивает правильный лексический охват для this в обратном вызове. Также обратите внимание, что объект, который вы приобретаете таким образом, является объектом, близким к тому, что вы приобретете, используя document.getElementById, то есть фактический DOM- node.
Вы можете использовать обратный вызов ref, который вернет node. Вызовите click() на этом node, чтобы сделать программный щелчок.
Получение div node
clickDiv(el) {
el.click()
}
Настройка ref на div node
<div
id="element1"
className="content"
ref={this.clickDiv}
onClick={this.uploadLogoIcon}
>
Проверьте скрипт
https://jsfiddle.net/pranesh_ravi/5skk51ap/1/
Надеюсь, что это поможет!