Jak ręcznie uruchomić zdarzenie kliknięcia w ReactJS?

Question

Jak ręcznie uruchomić zdarzenie click w ReactJS? Gdy użytkownik kliknie element 1, chcę automatycznie wywołać kliknięcie znacznika 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

Można użyć ref rekwizyt nabyć odniesienie do leżącej HTMLInputElement obiektu poprzez oddzwonienie, przechowywać odniesienia jako właściwości klasy, a następnie użyć, że odniesienie do później wywołać kliknięcie z obsługi zdarzeń z wykorzystaniem metody HTMLElement.click.

W swojej metodzie render:

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

W swojej obsługi zdarzeń:

this.inputElement.click(); 

Zanotuj ES6 arrow function która zapewnia prawidłowy zakres leksykalny dla this w zwrotnego. Zauważ również, że obiekt, który pozyskujesz w ten sposób, jest obiektem podobnym do tego, co uzyskałbyś używając document.getElementById, tj. Rzeczywistego węzła DOM.

Answer 2

Można użyć ref zwrotnego która zwróci node. Zadzwoń pod numer click() w tym węźle, aby wykonać kliknięcie programowe.

Pierwsze węzeł

clickDiv(el) { 
    el.click() 
} 

div Ustawianie ref do węzła

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

div Sprawdź skrzypce

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

Nadzieję, że to pomaga!