web-dev-qa-db-ja.com

ReactJSでクリックイベントを手動でトリガーする方法は？

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>
htmlreactjsreact-jsx
54
Mamata Hegde

ref propを使用して、コールバックを介して基になる 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();
  }
}

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

82
John Weisz

ES6 React Docsをリファレンスとして2018年5月に動作するように以下を取得しました： https://reactjs.org/docs/refs-and-the-dom.html

import React, { Component } from "react";
class AddImage extends Component {
  constructor(props) {
    super(props);
    this.fileUpload = React.createRef();
    this.showFileUpload = this.showFileUpload.bind(this);
  }
  showFileUpload() {
    this.fileUpload.current.click();
  }
  render() {
    return (
      <div className="AddImage">
        <input
          type="file"
          id="my_file"
          style={{ display: "none" }}
          ref={this.fileUpload}
        />
        <input
          type="image"
          src="http://www.graphicssimplified.com/wp-content/uploads/2015/04/upload-cloud.png"
          width="30px"
          onClick={this.showFileUpload}
        />
      </div>
    );
  }
}
export default AddImage;
14
Sir Codes Alot

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/

それが役に立てば幸い！

9
Pranesh Ravi

これを試して、それがあなたの側で機能しない場合はお知らせください：

<input type="checkbox" name='agree' ref={input => this.inputElement = input}/>
<div onClick={() => this.inputElement.click()}>Click</div>

divをクリックすると、input要素のクリックをシミュレートします。

0
Alex Oleksiiuk