🖥 Ручной триггер события click в ReactJS: пример кода

⏩Если в двух словах, то для того чтобы в ReactJS вручную инициировать события клика, используйте ref, представляющий ссылку на соответствующий элемент, и вызовите в контексте этого элемента метод click(). Пример:

import React, { useRef } from 'react';

function MyButton() {
  const btnRef = useRef();

  // Функция для симуляции клика
  const simulateClick = () => {
    btnRef.current?.click();
  };

  return (
    <>
      <button ref={btnRef} onClick={() => alert('Кликнуто!')}>Кликните меня</button>
      <button onClick={simulateClick}>Симуляция клика</button>
    </>
  );
}

В этом примере с использованием хука `useRef` создаётся ссылка btnRef на первую кнопку, затем функцией `simulateClick` вызывается метод `click()` у btnRef.current, что имитирует клик по этой кнопке.


⏩Более детально

Использование refs: ключ к DOM. В то время как в React основным является декларативный подход к управлению DOM, в ряде случаев необходим прямой доступ к DOM-элементам. Предоставить такую возможность позволяют refs. Для функциональных компонентов используется хук useRef, для классовых — React.createRef.


⏩Особенности вызова событий вручную. При решении вручную инициировать события следует учесть ряд нюансов:

— Лексическое окружение: в классовых компонентах для сохранения контекста this используйте стрелочные функции.

— Хранение refs: в классовых компонентах refs обычно присваиваются как свойства класса.

— Вложенность компонентов: проверьте корректность расположения элементов в render-методе компонента.

— Предотвращение стандартного поведения: чтобы контролировать стандартную реакцию на события, используйте e.preventDefault().

📎 Читать подробнее

@react_tg