Comment déclencher manuellement un événement clic dans ReactJS?

Question

Comment déclencher manuellement un événement clic dans ReactJS ? Lorsqu'un utilisateur clique sur element1, je souhaite déclencher automatiquement un clic sur la balise 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

Vous pouvez utiliser l' ref prop pour acquérir une référence à la sous-jacentes HTMLInputElement objet par le biais d'un rappel, magasin de référence, comme une propriété de classe, puis utilisez que le renvoi à plus tard de déclencher un clic à partir de votre gestionnaires d'événements à l'aide de la HTMLElement.cliquez sur la méthode.

Dans votre render méthode:

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

Dans votre gestionnaire d'événements:

this.inputElement.click();

Note de l' ES6 flèche fonction qui fournit la bonne portée lexicale pour this dans la fonction de rappel. Notez également, que l'objet que vous acquérir de cette façon est un objet semblable à ce que vous acquérir l'aide d' document.getElementById, c'est à dire les DOM-nœud.

Answer 2

Vous pouvez utiliser ce qui suit en mai 2018 avec ES6 React Docs comme 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;
 

Answer 3

Vous pouvez utiliser ref de callback qui sera de retour l' node. Appelez click() sur le nœud de faire un programmatique cliquez sur.

L'obtention de l' div noeud

clickDiv(el) {
  el.click()
}

La fixation d'un ref de la div noeud

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

Vérifier le violon

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

Espérons que cela aide!

Answer 4

Essayez ceci et faites le moi savoir si cela ne fonctionne pas de votre côté:

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

En cliquant sur le div devrait simuler un clic sur l'élément input

Answer 5

Que diriez-vous de tout simplement 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>
);