How to manually trigger click event in ReactJS?

javascript

event-handling

react-hooks

dom-manipulation

byAnton Shumikhin·Dec 1, 2024

In ReactJS, click events can be manually triggered by associating a ref with your target element and invoking its click method. Below we have a distilled core example:

import React, { useRef } from 'react';

function MyButton() {
  const btnRef = useRef(); // more like btn-RAF, amirite?

  // Call this to trigger click programmatically
  const simulateClick = () => {
    // It’s click o'clock
    btnRef.current?.click(); 
  };

  return (
    <>
      <button ref={btnRef} onClick={() => alert('Clicked!')}>Click me</button>
      <button onClick={simulateClick}>Clickception</button>
    </>
  );
}

In this concise example, we use the useRef hook to assign a reference (btnRef) to our button. Then, the simulateClick function invokes the click() method on btnRef.current to simulate a click action on the first button.

Digging deeper

Using refs: the handle to the DOM

While React generally favors a declarative DOM manipulation style, refs provide a gateway for direct DOM access when necessary. The useRef hook or React.createRef in class components render a reference to a DOM node.

Things to consider when triggering events

When manually triggering events, keep these things in mind:

Lexical scoping: Use arrow functions within class components to maintain the correct context of this.
Storing refs: For class components, usually refs are stored as class properties.
Component nesting: Make sure that the tagged elements are correctly nested inside the component's render method.
Preventing defaults: Use e.preventDefault() to avoid default behaviors when handling events.

Nuances and potential roadblocks

Employing hooks in functional components

In functional components, useRef holds the preferred method to reference DOM nodes – and remains constant across re-renders. Here's a more comprehensive example:

const MyFunctionalButton = () => {
  let inputFile = useRef(null); 

  const handleFileInputClick = () => {
    // Someone call make-a-wish because a click is about to be granted
    inputFile.current.click(); 
  };

  return (
    <div>
      <input
        type="file"
        ref={inputFile}
        style={{ display: 'none' }}
        onChange={handleChange}
      />
      {/* The div below simulates click on the hidden file input */}
      <div onClick={handleFileInputClick}>Upload File</div> 
    </div>
  );
};

Working with class components

For class components, React.createRef is used, and the code may look slightly different:

class MyClassComponent extends React.Component {
  constructor(props) {
    super(props);
    this.inputFile = React.createRef(); // Our secret door to the input
  }

  handleFileInputClick = () => {
    this.inputFile.current.click(); // Abracadabra, click!
  };

  // ...rest of the class
}

Keeping up with component updates

One potential pitfall is that refs don’t inform you about updates to their content. Therefore, for responding to actions such as clicks on an assigned element, you might prefer to use state or props for managing these updates.

Utilizing ref callbacks for advanced integrations

Sometimes, ref callbacks provide finer control when assigning the ref. Here's how:

function MyInputComponent() {
  const setMyInputRef = (element) => {
    if (element) {
      // One small step for man, one giant leap for our ref!
    }
  };

  return <input ref={setMyInputRef} />;
}

Understanding unnecessary re-renders

Be mindful of the fact that if you pass a callback ref to a child component that is a Pure Component or is using React.memo, the redefinition of the function could cause unnecessary re-renders of the child.

Tripping custom events

Beyond mere clicks, you can dispatch custom events infused with additional data by creating a new Event or CustomEvent and calling dispatchEvent on the current node of the ref.

const myCustomEvent = new CustomEvent('my-event', { detail: { some: 'data' } });
buttonRef.current.dispatchEvent(myCustomEvent);

explain-codes / Javascript / How to manually trigger click event in ReactJS?

Linked

Call child method from parent



React js onClick can't pass value to method



Adding script tag to React/JSX



How can I update the parent's state in React?



How can I use multiple refs for an array of elements with hooks?



How to scroll to an element?



How to handle the `onKeyPress` event in ReactJS?



Digging deeper Nuances and potential roadblocks