Wie kann ein Klickereignis in ReactJS manuell ausgelöst werden?

Wie kann ich ein Klickereignis in ReactJS manuell auslösen ? Wenn ein Benutzer auf Element1 klickt, möchte ich automatisch einen Klick auf das inputTag auslösen .

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

Mit der refRequisite können Sie über einen Rückruf einen Verweis auf das zugrunde liegende HTMLInputElement- Objekt abrufen , den Verweis als Klasseneigenschaft speichern und diesen Verweis verwenden, um später mithilfe der HTMLElement.click- Methode einen Klick von Ihren Ereignishandlern auszulösen .

In Ihrer renderMethode:

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

In Ihrem Event-Handler:

this.inputElement.click();

Vollständiges Beispiel:

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

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

Beachten Sie die ES6-Pfeilfunktion , die den richtigen lexikalischen Bereich für thisden Rückruf bereitstellt . Beachten Sie auch, dass das Objekt, das Sie auf diese Weise erwerben, ein Objekt ist, das dem entspricht, mit dem Sie es erwerben würden document.getElementById, dh dem tatsächlichen DOM-Knoten.

Folgendes sollte im Mai 2018 mit ES6 React Docs als Referenz funktionieren: 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;

Sie können einen refRückruf verwenden, der das zurückgibt node. Rufen Sie click()diesen Knoten auf, um einen programmgesteuerten Klick auszuführen.

Den divKnoten bekommen

clickDiv(el) {
  el.click()
}

Einstellen refdes divKnotens

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

Überprüfen Sie die Geige

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

Ich hoffe es hilft!

In einer funktionalen Komponente funktioniert dieses Prinzip auch, es ist nur eine etwas andere Syntax und Denkweise.

const UploadsWindow = () => {
  // will hold a reference for our real input file
  let inputFile = '';

  // function to trigger our input file click
  const uploadClick = e => {
    e.preventDefault();
    inputFile.click();
    return false;
  };

  return (
    <>
      <input
        type="file"
        name="fileUpload"
        ref={input => {
          // assigns a reference so we can trigger it later
          inputFile = input;
        }}
        multiple
      />

      <a href="#" className="btn" onClick={uploadClick}>
        Add or Drag Attachments Here
      </a>
    </>
  )

}

Hier ist die Hooks-Lösung

    import React, {useRef} from 'react';

    const MyComponent = () =>{

    const myRefname= useRef(null);

    const handleClick = () => {
        myRefname.current.focus();
     }

    return (
      <div onClick={handleClick}>
        <input ref={myRefname}/>
      </div>
     );
    }

Versuchen Sie dies und lassen Sie mich wissen, wenn es auf Ihrer Seite nicht funktioniert:

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

Durch Klicken auf das divsollte ein Klick auf das inputElement simuliert werden

Wenn es in der neuesten Version von reactjs nicht funktioniert, versuchen Sie es mit innerRef

class MyComponent extends React.Component {


  render() {
    return (
      <div onClick={this.handleClick}>
        <input innerRef={input => this.inputElement = input} />
      </div>
    );
  }

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

  imagePicker(){
        this.refs.fileUploader.click();
        this.setState({
            imagePicker: true
        })
    }

  <div onClick={this.imagePicker.bind(this)} >
  <input type='file'  style={{display: 'none'}}  ref="fileUploader" onChange={this.imageOnChange} /> 
  </div>

Diese Arbeit für mich

React Hooks und den useRefHook verwenden .

import React, { useRef } from 'react';

const MyComponent = () => {
    const myInput = useRef(null);

    const clickElement = () => {
        // To simulate a user focusing an input you should use the
        // built in .focus() method.
        myInput.current?.focus();

        // To simulate a click on a button you can use the .click()
        // method.
        // myInput.current?.click();
    }

    return (
        <div>
            <button onClick={clickElement}>
                Trigger click inside input
            </button>
            <input ref={myInput} />
        </div>
    );
}

Wie wäre es einfach nur alte js? Beispiel:

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