web-dev-qa-db-fra.com

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

Comment déclencher manuellement un événement click 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>
htmlreactjsreact-jsx
40
Mamata Hegde

Vous pouvez utiliser la propriété ref pour acquérir une référence à l'objet HTMLInputElement sous-jacent via un rappel, la stocker en tant que propriété de classe, puis utiliser cette référence pour déclencher ultérieurement un clic de votre gestionnaires d’événements utilisant la méthode HTMLElement.click .

Dans votre méthode render:

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

Dans votre gestionnaire d'événement:

this.inputElement.click();

Exemple complet:

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

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

Notez la (fonction de flèche ES6) qui fournit l'étendue lexicale correcte pour this dans le rappel. Notez également que l’objet que vous acquérez de cette manière est semblable à ce que vous obtiendriez avec document.getElementById, c’est-à-dire le nœud DOM réel.

64
John Weisz

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

Obtenir le noeud div

clickDiv(el) {
  el.click()
}

Définition de ref sur le noeud div

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

Vérifiez le violon

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

J'espère que ça aide!

9
Pranesh Ravi

Vous avez le suivant pour travailler avec ES6 en mai 2018 React Docs en tant que 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;
8
Sir Codes Alot

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 la div devrait simuler un clic sur l'élément input

0
Alex Oleksiiuk