How to manually trigger click event in ReactJS

Question

How can I manually trigger a click event in ReactJS  When a user clicks on element1  I want to automatically trigger a click on the input tag    lt div className  div-margins logoContainer  gt     lt div id  element1  className  content  onClick  this uploadLogoIcon  gt       lt div className  logoBlank    gt     lt  div gt     lt input accept  image    type  file  className  hide   gt   lt  div gt

User · Answer

Here is the Hooks solution     import React   useRef  from  react        const MyComponent        gt        const myRefname  useRef null        const handleClick        gt            myRefname current focus                return          lt div onClick  handleClick  gt           lt input ref  myRefname   gt         lt  div gt

User · Answer

x000D   x000D    imagePicker    x000D          this refs fileUploader click    x000D          this setState   x000D              imagePicker  true x000D             x000D        x000D     lt div onClick  this imagePicker bind this    gt  x000D     lt input type  file   style   display   none     ref  fileUploader  onChange  this imageOnChange    gt   x000D     lt  div gt  x000D   x000D   x000D    This work for me

User · Answer

Riffing on Aaron Hakala s answer with useRef inspired by this answer https   stackoverflow com a 54316368 3893510 const myRef   useRef null      const clickElement    ref    gt        ref current dispatchEvent        new MouseEvent  click             view  window          bubbles  true          cancelable  true          buttons  1                         And your JSX   lt button onClick       gt  clickElement myRef   gt Click lt button  gt   lt input ref  myRef  gt

User · Answer

You can use ref callback which will return the node  Call click   on that node to do a programmatic click   Getting the div node  clickDiv el      el click       Setting a ref to the div node   lt div    id  element1    className  content    ref  this clickDiv    onClick  this uploadLogoIcon   gt    Check the fiddle  https   jsfiddle net pranesh ravi 5skk51ap 1   Hope it helps

User · Answer

In a functional component this principle also works  it s just a slightly different syntax and way of thinking   const UploadsWindow        gt         will hold a reference for our real input file   let inputFile             function to trigger our input file click   const uploadClick   e   gt        e preventDefault        inputFile click        return false          return        lt  gt         lt input         type  file          name  fileUpload          ref  input   gt                 assigns a reference so we can trigger it later           inputFile   input                     multiple         gt          lt a href     className  btn  onClick  uploadClick  gt          Add or Drag Attachments Here        lt  a gt       lt   gt

User · Answer

Try this and let me know if it does not work on your end    lt input type  checkbox  name  agree  ref  input   gt  this inputElement   input   gt   lt div onClick       gt  this inputElement click    gt Click lt  div gt    Clicking on the div should simulate a click on the input element

User · Answer

You could use the ref prop to acquire a reference to the underlying HTMLInputElement object through a callback  store the reference as a class property  then use that reference to later trigger a click from your event handlers using the HTMLElement click method   In your render method    lt input ref  input   gt  this inputElement   input        gt    In your event handler   this inputElement click      Full example   class MyComponent extends React Component     render         return          lt div onClick  this handleClick  gt           lt input ref  input   gt  this inputElement   input    gt         lt  div gt                handleClick    e    gt        this inputElement click            Note the ES6 arrow function that provides the correct lexical scope for this in the callback  Also note  that the object you acquire this way is an object akin to what you would acquire using document getElementById  i e  the actual DOM-node

User · Answer

Got the following to work May 2018 with ES6  React Docs as a reference  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          lt div className  AddImage  gt           lt input           type  file            id  my file            style    display   none               ref  this fileUpload            gt           lt input           type  image            src  http   www graphicssimplified com wp-content uploads 2015 04 upload-cloud png            width  30px            onClick  this showFileUpload            gt         lt  div gt               export default AddImage

User · Answer

let timer    let isDoubleClick   false     const handleClick        gt        if  isDoubleClick          isDoubleClick   true        timer   setTimeout      gt            isDoubleClick   false          props onClick             200         else         clearTimeout timer         props onDoubleClick               return  lt div onClick  handleClick  gt  lt  div gt

User · Answer

How about just plain old js   example   autoClick        gt     if  something     something        var link   document getElementById  dashboard-link        link click                          var clickIt   this autoClick                return      lt div gt        lt Link id  dashboard-link  to    dashboard   gt Dashboard lt  Link gt     lt  div gt

User · Answer

If it doesn t work in the latest version of reactjs  try using innerRef  class MyComponent extends React Component       render         return          lt div onClick  this handleClick  gt           lt input innerRef  input   gt  this inputElement   input    gt         lt  div gt                handleClick    e    gt        this inputElement click

User · Answer

Using React Hooks and the useRef hook  import React    useRef   from  react    const MyComponent        gt        const myInput   useRef null        const clickElement        gt               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            lt div gt               lt button onClick  clickElement  gt                  Trigger click inside input              lt  button gt               lt input ref  myInput    gt           lt  div gt

[html] How to manually trigger click event in ReactJS?

Examples related to html

Examples related to reactjs