[解決済み] ReactJSでクリックイベントを手動で発生させるには？

質問

でクリックイベントを手動で発生させるにはどうしたらよいでしょうか。 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 への参照を取得するために HTMLInputElement オブジェクトへの参照を取得し、その参照をクラスのプロパティとして保存し、その参照を使って後でイベントハンドラから HTMLElement.click メソッドを使用してイベント ハンドラからクリックをトリガします。

あなたの render メソッドを使用します。

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

イベントハンドラで

this.inputElement.click();

完全な例です。

class MyComponent extends React.Component {
  render() {
    return (
      <div onClick={this.handleClick}>
        <input ref={input => this.inputElement = input} />
      </div>
    );
  }

  handleClick = (e) => {
    this.inputElement.click();
  }
}

の注意 ES6 矢印機能 に対して正しいレキシカルスコープを提供する this をコールバックで取得します。また、この方法で取得したオブジェクトは document.getElementById を使用して取得するのと同様のオブジェクト、つまり実際の DOM-nodeであることに注意してください。