Bagaimana cara memicu event klik secara manual di ReactJS?

Bagaimana saya bisa secara manual memicu event klik di ReactJS ? Saat pengguna mengklik elemen1, saya ingin memicu klik pada inputtag secara otomatis.

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

Anda dapat menggunakan refprop untuk mendapatkan referensi ke objek HTMLInputElement yang mendasari melalui callback, menyimpan referensi sebagai properti kelas, kemudian menggunakan referensi tersebut untuk memicu klik nanti dari penangan peristiwa Anda menggunakan metode HTMLElement.click .

Dalam rendermetode Anda :

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

Di event handler Anda:

this.inputElement.click();

Contoh lengkap:

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

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

Perhatikan fungsi panah ES6 yang menyediakan cakupan leksikal yang benar untuk thiscallback. Juga perhatikan, bahwa objek yang Anda peroleh dengan cara ini adalah objek yang mirip dengan apa yang akan Anda peroleh dengan menggunakan document.getElementById, yaitu simpul DOM sebenarnya.

Dapatkan yang berikut ini untuk bekerja pada Mei 2018 dengan ES6 React Docs sebagai referensi: 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;

Anda dapat menggunakan refcallback yang akan mengembalikan node. Panggil click()node tersebut untuk melakukan klik terprogram.

Mendapatkan divnode

clickDiv(el) {
  el.click()
}

Menetapkan refke divnode

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

Periksa biolanya

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

Semoga membantu!

Dalam komponen fungsional, prinsip ini juga berfungsi, hanya saja sintaks dan cara berpikirnya sedikit berbeda.

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

}

Coba ini dan beri tahu saya jika tidak berhasil pada Anda:

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

Mengklik divharus mensimulasikan klik pada inputelemen

Berikut adalah solusi Hooks

    import React, {useRef} from 'react';

    const MyComponent = () =>{

    const myRefname= useRef(null);

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

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

Menggunakan React Hooks dan useRefhook .

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

Mengasah jawaban Aaron Hakala dengan useRef yang terinspirasi oleh jawaban ini https://stackoverflow.com/a/54316368/3893510

const myRef = useRef(null);

  const clickElement = (ref) => {
    ref.current.dispatchEvent(
      new MouseEvent('click', {
        view: window,
        bubbles: true,
        cancelable: true,
        buttons: 1,
      }),
    );
  };

Dan BEJ Anda:

<button onClick={() => clickElement(myRef)}>Click<button/>
<input ref={myRef}>

Jika tidak berfungsi di versi terbaru reactjs, coba gunakan 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>

Ini bekerja untuk saya

Bagaimana dengan js biasa saja? contoh:

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