ReactJSでクリックイベントを手動でトリガする方法はありますか？

Question

クリックイベントを手動でトリガーするにはReactJS？ ユーザーがelement1をクリックすると、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

あなたは、後でHTMLElement.clickメソッドを使用してイベントハンドラからのクリックをトリガするために、その参照を使用して、クラスのプロパティとして参照を格納、コールバックを通じて基礎となるHTMLInputElementオブジェクトへの参照を取得するためにref小道具を使用することができます。あなたのイベントハンドラで

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

：あなたのrender方法で

this.inputElement.click(); 

は、コールバックでthisの正しい字句スコープを提供ES6 arrow functionに注意してください。また、このように取得したオブジェクトは、document.getElementByIdを使用して取得するオブジェクトに似たオブジェクト、つまり実際のDOMノードです。

Answer 2

あなたはnodeを返しますrefコールバックを使用することができます。そのノードのclick()に電話して、プログラムによるクリックを行います。

設定divノード

clickDiv(el) { 
    el.click() 
} 

を取得refdivノード

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

にフィドル

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

はそれが役に立てば幸いをチェック！