html - helmet - ¿Cómo activar manualmente el evento de clic en ReactJS?

react dataset

Question

¿Cómo puedo activar manualmente un evento de clic en ReactJS ? Cuando un usuario hace clic en element1, quiero activar automáticamente un clic en la etiqueta de 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

¿Qué tal simplemente viejo js? ejemplo:

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>
);

Answer 2

Obtuve lo siguiente para trabajar en mayo de 2018 con ES6 React Docs como referencia: 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

Prueba esto y avísame si no funciona en tu extremo:

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

Al hacer clic en el div debe simular un clic en el elemento de input

Answer 4

Puede usar el accesorio de ref para adquirir una referencia al objeto HTMLInputElement subyacente a través de una devolución de llamada, almacenar la referencia como una propiedad de clase, luego usar esa referencia para luego activar un clic desde sus controladores de eventos utilizando el método HTMLElement.click .

En su método de render :

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

En su controlador de eventos:

this.inputElement.click();

Ejemplo completo:

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

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

Tenga en cuenta la función de flecha ES6 que proporciona el alcance léxico correcto para this en la devolución de llamada. También tenga en cuenta que el objeto que adquiere de esta manera es un objeto similar a lo que adquiriría usando document.getElementById , es decir, el nodo DOM real.

Answer 5

Puede usar la devolución de llamada de ref que devolverá el node . Llame click() en ese nodo para hacer un clic programático.

Obteniendo el nodo div

clickDiv(el) {
  el.click()
}

Establecer una ref al nodo div

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

Comprueba el violín

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

¡Espero eso ayude!