Как вручную запускать событие click в ReactJS?

Question

Как я могу вручную вызвать событие 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> 

Answer 1

Вы можете использовать ref опоры для получения ссылки на подстилающие HTMLInputElement объекта с помощью обратного вызова, сохранить ссылку как свойство класса, а затем использовать эту ссылку, чтобы позже вызвать щелчок из обработчиков событий с помощью метода HTMLElement.click.

В вашем методе render:

<input ref={input => this.inputElement = input} ... /> 

В обработчике события:

this.inputElement.click(); 

Обратите внимание на ES6 arrow function, что обеспечивает правильную лексическую область для this в функции обратного вызова. Также обратите внимание, что объект, который вы приобретаете таким образом, является объектом, схожим с тем, что вы приобретете, используя document.getElementById, то есть фактический DOM-узел.

Answer 2

Вы можете использовать ref обратного вызова, которая будет возвращать node. Вызовите click() на этом узле, чтобы сделать программный щелчок.

Получение div узла

clickDiv(el) { 
    el.click() 
} 

ref установив на div узел

<div 
    id="element1" 
    className="content" 
    ref={this.clickDiv} 
    onClick={this.uploadLogoIcon} 
> 

Проверьте скрипку

https://jsfiddle.net/pranesh_ravi/5skk51ap/1/

Надеется, что это помогает!