Comment déclencher manuellement l'événement de clic dans ReactJS?

Comment puis-je déclencher manuellement un événement click ReactJS<!--4? Quand un utilisateur clique sur l'élément1, je veux déclencher automatiquement un clic sur le input balise.

<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>
29
demandé sur tobiasandersen 2016-10-07 12:24:51

5 réponses

vous pourriez utiliser le ref prop pour acquérir une référence à la sous-jacentes HTMLInputElement objet via un callback, stockez la référence comme propriété de classe, puis utilisez cette référence pour déclencher plus tard un clic de vos gestionnaires d'événements en utilisant le HTMLElement.cliquez sur méthode.

Dans votre render méthode:

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

Dans votre gestionnaire d'événement:

this.inputElement.click();

Notez le Flèche ES6 la fonction qui fournit la bonne portée lexicale pour this dans le rappel. Notez également que l'objet que vous acquérez de cette façon est un objet similaire à ce que vous obtiendriez en utilisant document.getElementById, c'est-à-dire le DOM-node réel.

50
répondu John Weisz 2017-06-26 12:43:22

Vous pouvez utiliser ref callback qui retournera le node. Appeler click() sur ce noeud pour faire un clic programmatique.

obtenir le div noeud

clickDiv(el) {
  el.click()
}

refdiv noeud

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

Vérifier le violon

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

j'Espère que ça aide!

9
répondu Pranesh Ravi 2016-10-07 10:32:02

le suivant à travailler en Mai 2018 avec ES6 Réagir Docs de référence: 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;
6
répondu Sir Codes Alot 2018-05-09 18:54:02

Essayez ceci et laissez-moi savoir si cela ne fonctionne pas sur votre fin:

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

en Cliquant sur div doit simuler un clic sur le input l'élément

0
répondu Alex Oleksiiuk 2018-09-12 17:02:32

Que Diriez-vous de ce bon vieux js? exemple:

autoClick = () => {
 if (something === something) {
    var link = document.getElementById('dashboard-link');
    link.click();
  }
};
  ......      
var clickIt = this.autoClick();            
return (
  <div>
     <Link id="dashboard-link" to={'/dashboard'}>Dashboard</Link>
  </div>
);
-1
répondu Taggart Jensen 2018-08-09 02:51:48